js 表单验证插件

yyn查看全部>> 01-11

人气 47

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

首先定义一个校验 json

vaId: 表示 想要校验的文本框 id,
tipId: 表示 想要校验的文本框 如果条件不成立,提示的 span 标签 id ,
rule: 存储一个对象集合,
   -- 第一种 reg: 正则   tip : 对应 条件不成立 提示语
   -- 第二种 maxLe  : 最大长度 minLe :最小长度  tip: 对应 条件不成立 提示语 ,以下 均是~
   -- 第三种 ajaxURL: ajax ,返回 1 条件成立 ,  0  条件不成立
   -- 第四种 custom: 自定义 校验 , 自己写 函数 返回 true ,false 对应条件是否成立

<!DOCTYPE html>
<html>
  
    <head>
        <meta charset="utf-8" />
        <title>表单校验</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/my_validate_1.0.0.js"></script>
        <script type="text/javascript" src="js/new.js" ></script>
    </head>
  
    <body>
        <form action="add.action" method="post" id="form1" >
            用户名:<input type="text" id="uname" name="uname"  /> --
            <span id="cuname">*</span><br> 密码: <input type="text" id="pswd" name="pswd"  /> --
            <span id="cpswd">*</span><br> 性别:
            <select id="sex" name="sex" >
                <option value="">-请选择-</option>
                <option value="1">男</option>
                <option value="0">女</option>
            </select> --
            <span id="csex">*</span><br>
            爱好:<input  type="text" id="rad" name="rad" value="钱">--<!-- 自定义校验-->
            <span id="crad">*</span><br>
            邮箱:<input  type="text" id="email" name="email" >--
            <span id="cemail">*</span><br>
            邮政编码:<input  type="text" id="post" name="post">--
            <span id="cpost">*</span><br>
            数字和英文:<input  type="text" id="abc" name="abc">--
            <span id="cabc">*</span><br>
            手机:<input  type="text" id="mobile" name="mobile">--
            <span id="cmobile">*</span><br>
            <button id="sub" type="button">提交</button>
        </form>
    </body>
  
</html>
;
(function($) { // 开启沙箱模式
     
    zz = {  // 定义一个 名为 zz 的方法,在这里添加常用正则, 例如 zz.notNull()  调用
       notNull: function(){ return /^.+$/;},  // 不能为空
       chinese:function(){ return /^[\u4e00-\u9fa5]+$/;}, // 中文
       email:function(){return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;}, // 邮箱
       post:function(){return /^[1-9][0-9]{0,}$/;},//邮政编码
       num:function(){return /^[0-9]*$/;}, // 数字
       ffzs:function(){return /^\d+$/;}, // 非负整数
       aBc123:function(){return /^[A-Za-z0-9]+$/;},//数字和英文
       mobile:function(){return /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;},//手机号
       tel:function(){return /^1[0-9]{10}$/;},// 手机号
       fax:function(){return /^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;}//传真
         }
     
    $(function() {
        var suCount = 0; // 成功提交前提 ,为 0 可以提交 ,为 1 不可提交
        $.fn.lc_val_form = function(options) {
            var valiJSON=toValiJson();
            $("#" + options["subId"]).click(function() { // 提交按钮被单击
                suCount = 0; 
                for(var i = 0; i < valiJSON.length; i++) {
                    var val = $("#" + valiJSON[i].vaId).val();
                    eachVali(val, i);
                }
                if(options["ifAjax"] == "yes" && suCount == 0) { // 如果 选择 ajax 提交 ,那么如果校验全部通过,提交  ,提交后可使用  getAjax=function(data){alert(data);} 获取返回数据
                    $.ajax({
                        type: "post",
                        url: $("#" + options["formId"]).attr("action"),
                        async: false,
                        data: $("#" + options["formId"]).serialize(),
                        success: function(data) {
                            getAjax(data);
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log("ajax 提交表单报错了!");
                            if(XMLHttpRequest.status==404){
                                console.log("错误tips:--网页走丢了--");
                            }
                            else if(XMLHttpRequest.status==500){
                                console.log("错误tips:--内部服务器错误--");  
                            }
                        }
                    });
                } else if(options["ifAjax"] == "no" && suCount == 0) { // 如果选择 普通方式提示,那么提交 form action 里的地址
                    $("#" + options["formId"]).submit();
                }
                 
            });
  
            // -----------------------------------------------------------
             
            if(options["realTime"] == "yes") {
                $("#"+options["formId"]).addClass("formVali");
                for(var i = 0; i < valiJSON.length; i++){
                    $("#"+valiJSON[i].vaId).addClass("vali");
                }
                $(".formVali .vali").on('blur', function() {
                    var t = $(this);
                    var valiJSON=toValiJson();
                    for(var i = 0; i < valiJSON.length; i++) {
                        if(t.attr("id") == valiJSON[i].vaId) {
                            var getId = t.attr("id");
                            var val = $("#" + getId).val();
                            eachVali(val, i);
                        }
                    }
                })
            }
  
            //------------------------------------------------------------
  
            function eachVali(val, i) {
                for(var j = 0; j < valiJSON[i].rule.length; j++) {
                    function addTip() {
                        if(options["ifImg"] == "yes") {
                            $("#" + valiJSON[i].tipId).html("<img src='" + options["ImgUrl"] + "'>" + " " + valiJSON[i].rule[j].tip);
                            suCount = 1;
                        } else {
                            $("#" + valiJSON[i].tipId).html(valiJSON[i].rule[j].tip);
                            suCount = 1;
                        }
                    }
  
                    if(typeof(valiJSON[i].rule[j].reg) != 'undefined') { // 第一种: 标准正则校验
                        var ifSucc = valiJSON[i].rule[j].reg.test(val);
                        if(valiJSON[i].rule[j].reg.toString()=="/^.+$/")// 如果正则是判断非空,那么正常执行
                        {
                            if(!ifSucc) {
                               addTip();
                               break; // 条件不成立-跳出循环
                            } else {
                               $("#" + valiJSON[i].tipId).html("");
                            }
                        }else{  // 否则,需判断 值要不能为空
                            if(!ifSucc&&val!="") {
                               addTip();
                               break; // 条件不成立-跳出循环
                            } else {
                               $("#" + valiJSON[i].tipId).html("");
                            }
                        }
                    } else if(typeof(valiJSON[i].rule[j].maxLe) != 'undefined') { // 第二种: 长度校验
                        if(val.length > parseInt(valiJSON[i].rule[j].maxLe) || val.length < parseInt(valiJSON[i].rule[j].minLe)) {
                            addTip();
                            break;
                        } else {
                            $("#" + valiJSON[i].tipId).html("");
                        }
                    } else if(typeof(valiJSON[i].rule[j].ajaxURL) != 'undefined') { // 第三种: ajax 校验 0:不成立 1:符合条件
                        var d="";
                        $.ajax({
                            url: valiJSON[i].rule[j].ajaxURL,
                            data: valiJSON[i].rule[j].value,
                            type: 'post',
                            traditional: true,
                            async: false,
                            dataType: "json",
                            success: function(data) {
                                d=data;
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                console.log("ajax 校验报错了!");
                                if(XMLHttpRequest.status==404){
                                console.log("错误tips:--网页走丢了--");
                                }
                                else if(XMLHttpRequest.status==500){
                                console.log("错误tips:--内部服务器错误--");  
                                }
                            }
                        });
                        if(parseInt(d)==0){
                            addTip();
                            break;
                        }else{
                            $("#" + valiJSON[i].tipId).html("");
                        }
                    } else if(typeof(valiJSON[i].rule[j].custom) != 'undefined') { // 第四种 ,自定义校验,自己写函数,返回 true 或 false
                        if(!valiJSON[i].rule[j].custom()) {
                            addTip();
                            break;
                        } else {
                            $("#" + valiJSON[i].tipId).html("");
                        }
                    } else { // 以上皆不成立,说明 校验json 书写有误 
                        suCount = 1;
                        console.log("输入的校验规则有误!");
                    }
                }
            }
  
        }
    });
})(jQuery);
// @且听风吟
function pdLove() { // 自定义条件
    if($("#rad").val() == "钱") {
        console.log("(来自于自定义校验)爱好不能是钱");
        return false;
    } else {
        return true;
    }
}
  
function toValiJson(){
    var valiJson = 
    [
    {vaId:"uname",tipId:"cuname",
    rule:[
          {reg:zz.notNull(),tip:"用户名不能为空"},
          {maxLe:"6",minLe:"4",tip:"用户名长度不能超过6个字符,不能少于4个字符"},
          {ajaxURL:"aj.txt",value:{val:"参数1",name:"参数2"},tip:"已经存在的用户名"}
         ]
    },
    {vaId:"pswd",tipId:"cpswd",
    rule:[
          {reg:zz.notNull(),tip:"密码不能为空"},
          {reg:zz.chinese(),tip:"必须是中文"},
          {custom:function(){
            if($("#pswd").val().length>4){
                return false;
            }else{
                return true;
            }
          },tip:"密码长度必须小于4个字符"}
         ]
    },
    {vaId:"sex",tipId:"csex",rule:[{reg:zz.notNull(),tip:"请选择性别"}]},
    {vaId:"rad",tipId:"crad",rule:[{custom:pdLove,tip:"爱好不能是钱"}]},
    {vaId:"email",tipId:"cemail",rule:[{reg:zz.notNull(),tip:"邮箱不能为空"},{reg:zz.email(),tip:"邮箱格式不正确"}]},
    {vaId:"post",tipId:"cpost",rule:[{reg:zz.post(),tip:"邮政编码格式不正确"}]},
    {vaId:"abc",tipId:"cabc",rule:[{reg:zz.aBc123(),tip:"必须是数字和字母"}]},
    {vaId:"mobile",tipId:"cmobile",rule:[{reg:zz.mobile(),tip:"手机号码格式不正确"}]}
    ];
    return valiJson;
}
  
  
$(function() {
    $().lc_val_form({
        subId: "sub", // 提交按钮 id
        formId: "form1", // form 表单 id
        ifAjax: "no", // 是否使用ajax 提交 是-yes 否- no
        realTime: "yes", // 实时 onblur 校验
        ifImg: "yes", // 提示语 是否使用感叹号图标 
        ImgUrl: "img/tipImg.png", // 感叹号图标地址
    });
});

来源https://www.52pojie.cn/thread-852089-1-1.html

标签
相关作品
js 表单验证插件:等您坐沙发呢!



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆