jquery 之validate 笔记
分类:计算机教程

1.jQuery的框架的验证:validate框架

默认分类 2010-04-04 20:35:01 阅读123 评论0 字号:大中小
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。
说明:需要JQuery版本:1.2.6
步骤:
1, 要导入相应的jQuery.js与jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript">
2, 在相应的字段上指定验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必须要输入数据
3, 指定要对表单进行验证
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>

Jquery Validate 验证规则

(1)required:true 必输字段
(2)remote:”check.PHP” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

效果如下图:

Jquery Validate 自定义验证规则

addMethod(name,method,message)方法:
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只
能输一个字母,范围是a-f,写法如下:

$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},”必须是一个字母,且a-f”);
用的时候,比如有个表单字段的id=”username”,则在rules 中写
username:{
af:["a","f"]
}
方法
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .error{
            color: red;
        }
    </style>


<script src="js/jquery.min.js"></script>
<!-- 导入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function(){
        $('#a').validate({
            rules:{
                username:{
                    required:true
                },
                password_1:{
                    required:true,
                    rangelength:[5,10],

                },
                password_2:{
                    required:true,
                    equalTo:'#pa'
                },
                sex:{
                    required:true
                },
                you:{
                    required:true,
                    email:true
                },

            },
            messages:{
            username:{
                required:'字段不能为空'
               },
               password_1:{
                required:'字段不能为空',
                rangelength:'密码长度要在5到10位',
               },
               password_2:{
                required:'字段不能为空',
                equalTo:'两次密码不一样'
               },
               sex:{
                required:'性别不能为空',
               },
               you:{
                required:'邮箱不能为空',
                email:'邮箱格式不对'
               }
           }
        })
    })
</script>
</head>
<body>
    <form action="a.jsp" method="post" id="a">
        请输入姓名:<input type="text" name="username" ><br>
        请输入密码: <input type="password" name="password_1" id="pa"><br>
        确认密码: <input type="password" name="password_2" ><br>

        性别: <input type="radio" name="sex" value="男">男
             <input type="radio" name="sex" value="女">女
             <label for="sex" generated="true" class="error"></label><br>
             邮箱: <input type="text" name="you" ><br>
             <input type="submit" value="submit">
    </form>
</body>
</html>

第二种就是js的blur事件写的验证:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /* form{
      margin-left:400px;
  } */
</style>
<script src="js/jquery.min.js"></script>

<script>
    $(function () {
        var a = b = c = d = e = f = g = false;
        $("#tables").css({ "border": '1px solid blue', 'text-align': 'center' }).css("width", "800").css("height", "400px")
        $('td').css({ "border": "1px solid blue" })
        $("#td1").css({ 'width': '100' })
        $("#td2").css({ "width": "400" })
        $("#td3").css({ "width": "300" })
        // 设置id a的颜色 
        $('span').css('color', 'red')
        //登录名的验证
        $("input[name='username']").blur(function () {
            var va = $(this).val();
            var char = va.charCodeAt(0);
            //alert(va);
            if (va == "") {
                a = false;
                // $(this).click(function(){
                //     $('#a').css('background','blue').css('width','100px')
                // })        
                $('#a').html(function () {
                    return "值不能为空";
                })
            }
            else if (va.length < 6) {
                a = false;
                $('#a').html('登录名不能少于6个字')
            }
            else if (!((char >= 65 && char <= 90) || (char >= 97 && char <= 122))) {
                a = false;
                $('#a').html('登录名的首字母只能为字母')
            }
            else {
                a = true;
                $('#a').html(function () {
                    return '';
                })
            }
        })
        //验证姓氏
        $("input[name='xing']").blur(function () {
            var xing = $(this).val();
            if (xing == '') {
                b = false;
                $('#b').html('值不能为空')
            }
            else if(xing.length>6){
                b=false;
                $('#b').html('你的姓氏不符合要求,字符长度超过6')
            }
            else{
                b=true;
                $('#b').html(function(){
                    return '';
                })
            }
        })
        //验证密码
        $('#password_1').blur(function(){
            var va=$('#password_1').val();
            if(va==''){
                c=false;
                $('#c').html('密码不能为空')
            }
           else if(va.length<8){
                c=false;
                $('#c').html('你的密码不足8位数不符合要求')
            }
            else{
                c=true;
                $('#c').html('');
            }
        })
        //密码重复验证
        $('#password_2').blur(function(){
            //拿到本身的密码
            var va1=$(this).val();
            //拿到之前的密码
            var va2=$('#password_1').val();
            if(va1==''){
                d=false;
                $('#d').html('密码不能为空')
            }
            else if(va1!=va2){
                d=false;
                $('#d').html('两次密码不正确')
            }
            else{
                d=true;
                $('#d').html('')
            }
        })
        //性别选择直接选中下下标为1的
        $('input[name=sex]:eq(1)').prop('checked','checked')
        $('input[name=sex]').blur(function(){

        })
        //年验证
        $('#year').blur(function(){
            //拿到年的值
            var va=$(this).val();
            // var v=Number(va);
           //alert(va)
           var s=/^[0-9] $/;
            if(va==''){
                f=false;
                $('#f').hmtl('年不能为空')
            }
            // else if(!s.test(va)){
            //     f=false;
            //     $('#f').hmtl('年只能是数字')
            // }
            else if(isNaN(va)){
                f=false;
                $('#f').html('年只能是数字')
            }
            else if(va.length!=4){
                f=false;
                $('#f').html('值必须为4位数')
            }
            else{
                f=true;
                $('#f').html('') 
            }

        })
    //天数验证
    $("input[name='day']").blur(function(){
        var va=$(this).val();
        var t = /^(([1-9])|((1|2)[0-9])|30|31)$/; 
        if(va===''){
            g=false;
            $('#f').html('天数不能为空')
        }
        else if(! t.test(va)){
            g=false;
            $('#f').html('对不起,天数必须在 1-31 之间!')
        }else{
            g=true;
            $('#f').html('') 
        }
    })
    $('#su').click(function(){
      return  a&&b&&c&&d&&f&&g
    })

    })
</script>

<body>
    <form action="s">
        <table id="tables">
            <tr>
                <td colspan="3">
                    <img src="images/d.png" alt="图片 1">
                </td>

            </tr>
            <tr>
                <td id="td1">登录名</td>
                <td id="td2">
                    <input id="input1" type="text" name="username">
                </td>
                <td id="td3">

                </td>
            </tr>
            <tr>
                <td>姓氏</td>
                <td>
                    <input type="text" name="xing">
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="password" id="password_1">
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>再次输入密码</td>
                <td>
                    <input type="password" name="password" id="password_2">
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="男" >男
                    <input type="radio" name="sex" value="女">女
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <input type="text" name="year" id="year">
                    <select name="month" id="select_1">
                        <option value="一月" selected>一月</option>
                        <option value="二月">二月</option>
                        <option value="三月">三月</option>
                    </select>
                    <input type="text" name="day">
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="reset" value="reset">
                </td>

            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="提交" id="su">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.error{

color: red;

}

</style>

<script src="js/jquery.min.js"></script>

<!-- 导入的框架 -->

<script src="js/jquery.validate.min.js"></script>

<script>

$(function(){

$('#a').validate({

rules:{

username:{

required:true

},

password_1:{

required:true,

rangelength:[5,10],

},

password_2:{

required:true,

equalTo:'#pa'

},

sex:{

required:true

},

you:{

required:true,

email:true

},

},

messages:{

username:{

required:'字段不能为空'

},

password_1:{

required:'字段不能为空',

rangelength:'密码长度要在5到10位',

},

password_2:{

required:'字段不能为空',

equalTo:'两次密码不一样'

},

sex:{

required:'性别不能为空',

},

you:{

required:'邮箱不能为空',

email:'邮箱格式不对'

}

}

})

})

</script>

</head>

<body>

<form action="a.jsp" method="post" id="a">

请输入姓名:<input type="text" name="username" ><br>

请输入密码: <input type="password" name="password_1" id="pa"><br>

确认密码: <input type="password" name="password_2" ><br>

 

性别: <input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女

<label for="sex" generated="true" class="error"></label><br>

邮箱: <input type="text" name="you" ><br>

<input type="submit" value="submit">

</form>

</body>

</html>

  1. 基础知识
    1.1. 指定验证规则的方式
    1.1.1. 把验证规则写到字段元素的class属性中
    例:
    名称 * <input type="text" name="loginName" class="required"><br>
    密 *  <input type="password" name="password" class="required"><br>
    再次输入 <input type="password" name="password2"
    class="{equalTo: '[name=password]'} required"><br>
    生日   <input type="text" name="birthday" class="dateISO"><br>
    E-mail *<input type="text" name="email" class="email"><br>
    PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">

说明:
1,如果使用class="{}"的方式,必须引入包:jquery.metadata.js
1.1.2. 调用validate()方法时传递字段的验证规则
$(function() {
$("#testForm").validate({
rules: {
loginName:{
required: true,
min: 2
} ,
password: {
required: true
},
password2: {
equalTo: "input[name=password]"
}
}
});
});
1.2. 内置的验证规则
required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: "gif|png|jpg" 输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10
说明:
1, remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。
2, 某些属性值中的引号不能省略,否则出错。如accept、equalTo等。
1.3. 自定义验证规则
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:
jQuery.validator.addMethod("name",function,message)
其中:
1, name为验证规则的名称
2, function定义验证的规则。参数有?。返回值为?。
3, message是验证失败时的提示信息。
1.4. 指定错误提示内容
1.4.1. 更改默认的提示内容
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
扩展工具
stringMinLength: jQuery.validator.format("请输入一个小于{0} 的字符串, 一个中文字符长度为2”),
stringMaxLength: jQuery.validator.format("请输入一个大于} 的字符串, 一个中文字符长度为2”),
string: “含特殊符号!”,
byteRangeLength: "请确保输入的值在3-15个字节之间(一个中文字算2个字节)",
stringCH: "只能输入汉字,一个汉字占两具字节",
stringEN:”只能输入字母”

1.4.2. 个别表单改变提示内容(只对当前表单有效)
方法一:
<input type="file" name="parResource"
class="{accept: 'zip', messages: {accept:'请选择正确的文件'}}">

方法二:
$(function() {
$("#testForm").validate({
messages:{
loginName: {
required: "必选字段2"
},
email: {
required: '必选字段22',
email: "请输入正确格式的电子邮件2"
}
}
});
});
1.5. 改变错误消息显示样式
指定label.error的样式就可以了,如下:
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>

说明:label.error指class为error的label元素,如:<label for="resource" class="error">

这是汤阳光老师讲的,虽然这位老师很年轻,但是他的技术很高,以前学的知识很多,所以也有思路不清的地方,可是自从这位老师给我们讲课,我就感觉到他有一种对JAVA技术的灵性,无论是什么在他那里总能得到思想上的升华!真是佩服!

本文由美洲杯赔率发布于计算机教程,转载请注明出处:jquery 之validate 笔记

上一篇:java 美洲杯赔率编程思想,编程思想 下一篇:没有了
猜你喜欢
热门排行
精彩图文