表单验证插件之jquery.validate.js

时间:2023-02-18 20:10:08

提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JQuery表单验证插件jQuery.validate.js</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .myform{
            width:800px;
            margin:30px auto;
        }
        .myform legend{
            margin-left:30px;
        }
        p{
            margin:30px;
        }
        .side{
            text-align: center
        }
        em.success{
            color:green;
        }
        em.error{
            color:red;
        }
        /*还可以引入validation.css样式表,可以增加图标显示*/
    </style>
</head>
<body>
    <form class="myform" id="myForm" method="get" action="">
        <fieldset>
            <legend>注册账号</legend>  

            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" name="username"/>
            </p>  

            <p>
                <label for="password">密码</label>
                <input type="password" id="password" name="password" value="" />
            </p>  

            <p>
                <label for="confirm_password">确认密码</label>
                <input type="password" id="confirm_password" name="confirm_password" value="" />
            </p> 

            <p>
                <label for="email">邮箱</label>
                <input id="email" name="email" class="required" />
            </p>

            <p>
                <label for="tel">手机号码</label>
                <input id="tel" name="tel"/>
            </p>  

            <p>
                <label for="url">项目链接</label>
                <input id="url" name="url" class="url"/>
            </p>  

            <p>
                <label for="code">验证码</label>
                <input id="code" name="code" class="num"/>
            </p>              

            <p>
                <label for="sex">性别</label>
                <select id="sex" name="sex">
                    <option value="0">男</option>
                    <option value="1" class="woman">女</option>
                </select>
            </p> 

            <p>
                <label for="">是否已婚</label>
                <label><input type="radio" value="0" name="married">是</label>
                <label><input type="radio" value="1" name="married">否</label>
                <label><input type="radio" value="2" name="married">离异</label>
            </p>     

            <p>
                <label for="">爱好</label>
                <label><input type="checkbox" name="hobby_0" value="0" class="travel">旅游</label>
                <label><input type="checkbox" name="hobby_1" value="1">睡觉</label>
                <label><input type="checkbox" name="hobby_2" value="2">上网</label>
                <label><input type="checkbox" name="hobby_3" value="3">看电影</label>
            </p>

            <p>
                <input type="submit" name="submit" value="提交" class="btn_submit"/>
            </p>
        </fieldset>
    </form>
    <p class="side">此处填写的内容可以用来判断是否刷新了页面<input type="text" /></p>
    <script type="text/javascript" src="jquery-1.12.0.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <!-- 引入支持固定格式解析的jQuery插件,可以将验证规则全部编写到class属性中,当然我还没试过,好不好用就不知道了 -->
    <script type="text/javascript" src="jquery.metadata.js"></script>
    <script type="text/javascript" >
        //DOM节点树生成后
        $(document).ready(function() {

            //配置参数,选择器里放id或者class名都可以
            $(".myform").validate({
//通过name属性来设置验证规则 rules: { username: { required:true, //也可以直接在标签里添加class="required" minlength:2 //设置最小长度 }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" //要求与指定元素的值相匹配 }, tel:{ number:true //也可以直接在标签里添加class="number" }, email:{ email:true //也可以直接在标签里添加class="email" }, url:"url", //可以直接在标签里添加class="url",也可以像上面一样改成{url:true} code:{ calculate:"1+1" } }, //通过name属性来设置验证提示信息的内容 messages: { username: { required:"用户名必填", minlength:"至少2个字符", }, password: { required: "请输入密码", minlength: "密码不能少于6个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能少于6个字符", equalTo: "密码输入不一致" }, tel:{ required:"请输入手机号码", number:"请输入数字" }, email:"请输入一个邮件地址", url:"请输入一个网址" }, //自定义一个提交方法 submitHandler: function(form) { alert("已经提交!"); // form.submit(); $(form).ajaxSubmit();//和上面一行的结果一样,页面会被刷新一遍,不想刷新就用$.ajax()或者插件自带的remote方法 }, //想要不提交表单,只进行验证 debug:true, //忽略某些元素不验证 ignore:".ignore", //指明错误放置的位置,默认是把错误信息放在验证的元素后面 errorPlacement:function(error,element){ element.siblings(".success").remove();//为了解决错误信息与正确信息同时出现的问题 if (element.is(":radio")){ error.appendTo(element.parent().next().next()); }else if (element.is(":checkbox")){ error.appendTo (element.next()); }else{ error.appendTo(element.parent()); } }, //自定义验证提示信息的统一标签、样式和内容 errorElement:"em", //使用什么标签再把上边的errorELement包起来 //wrapper:"div", //把错误信息统一放在一个容器里面 //errorLabelContainer:"#messageBox", //label指向上面那个提示信息标签em,注意设置类名为success的样式,如果是提示错误信息,直接改类名为error的样式 success:function(label){ label.siblings("em").remove();//为了解决"可以啦"三个字会在每次验证正确时叠加在后面的问题 label.text("可以啦").removeClass("error").addClass("success"); }, //显示总共有多少个未通过验证的元素,用的时候会出现把这些元素的错误信息给隐藏掉的问题 // showErrors:function(errorMap,errorList){ // console.log("有"+this.objectLength(this.invalid)+"个未通过验证的元素"); // }, //修改验证的触发方式,以下均是boolean型 onsubmit:true,//提交是验证,默认为true //以下参数虽然默认都是true,但其中有一些除非改为false,否则直接写true会报错 // onfocusout:true,//失去焦点是验证(不包括checkboxes/radio buttons) // onkeyup:true,//在keyup时验证 // onclick:true,//在checkboxes和radio点击时验证 // focusInvalid:true,//提交表单后,未通过验证的表单会获得焦点 focusCleanup:false,//如果是true那么当未通过验证的元素获得焦点时,移除错误提示同,这时要避免和 focusInvalid 一起用 //异步验证,即使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项 // remote: { // url: "check-email.php", //后台处理程序 // type: "post", //数据发送方式 // dataType: "json", //接受数据格式 // data: { //要传递的数据 // username: function() { // return $("#username").val(); // } // } // } }); //自定义一个验证方法,两个参数,一个是方法名,另一是回调函数,有三个参数,第一个是当前被验证元素的值 ,第二个是当前被验证的元素,第三个是传入的参数 $.validator.addMethod("calculate",function(val,ele,param){ return val==eval(param) //return this.optional(ele) || val==eval(param)//不要求值为必填,如果将||改成&&会出现问题 },"请正确输入数学公式计算后的结果"); //为一个单独的元素添加验证规则,前提是validate()方法必须首先被调用 $("#url").rules("add",{ required:true }); $("#tel").rules("add",{ required:".travel:checked"//当旅游这个复选框被选中的时,手机号码就变成必填,还可以接一个function(){},返回为真时需要验证 }) //检查是否验证通过 $(".btn_submit").on("click",function(){ console.log($(".myform").valid()); }) });     </script>   </body> </html>

关于radio和checkbox、select的验证,radio的required表示必须选中一个,checkbox的required表示必须选中,checkbox的 minlength 表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间,select 的 required 表示选中的 value不能为空,maxlength和rangelength:[2,3] 同上。