jQuery plugin: Validation的详细使用和例子

表单验证
最新推荐文章于 2024-08-07 19:44:30 发布
原创最新推荐文章于 2024-08-07 19:44:30 发布 · 202 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#jQuery #ASP #JavaScript #XHTML #ViewUI
JQUERY 专栏收录该内容
3 篇文章
订阅专栏
本文介绍了一种使用jQuery插件实现的表单验证方法，包括验证规则、自定义验证及动态生成规则的方法。
<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>无标题页</title>

    <script src="jquery-1[1].3.2.min.js" type="text/javascript"></script>

<script src="jquery.validate.js" type="text/javascript"></script>

 <script type="text/javascript">

        $.validator.setDefaults({

            submitHandler: function(form) { form.submit(); }

        });

        $().ready(function() {

            // validate signup form on keyup and submit

            $("#form1").validate({

                event: "blur",

                rules: {

                name: "required",

                url: "required",

                email: "required",

                    name: {

                            required: true                       

                        },

                    url: {

                        required: true,

                        url:true

                    },

                    email: {

                        required: true,

                        email:true

                    },

                    tel:{

                        required: true,

                        digits:true

                    }

                },

                messages: {

                    name: {

                            required: "请输入名称！"                    

                        },

                    url: {

                        required: "请输入地址！",

                        url: "输入正确的网站地址！"

                    },

                    email: {

                        required: "请输入Email！",

                        email:"请输入正确的邮件地址"

                    },

                    tel:{

                        required:"请输入电话号码",

                        digits:"请输入正确的号码"

                    }

                }

            });

        });

</script>



</head>

<body>

     <div id="main">

    <form class="cmxform" id="form1" runat="server" >

    <fieldset>

        <legend>密码修改</legend>

       

        <p>

            <label for="txtOldPassword">网站名称</label>

             <asp:TextBox ID="name" runat="server" MaxLength="150"   ></asp:TextBox>        

        </p>

        <p>

            <label for="txtNewPassword">网站链接地址</label>

            <asp:TextBox ID="url" runat="server"  MaxLength="150"   ></asp:TextBox>

        </p>

        <p>

            <label for="txtConfirmPassword">Email</label>

            <asp:TextBox ID="email" runat="server" MaxLength="150" ></asp:TextBox>

        </p>    

       

         <p>

            <label for="txtConfirmPassword">电话号码</label>

            <asp:TextBox ID="tel" runat="server" MaxLength="150"  ></asp:TextBox>

        </p>    

          <p>

            <label for="txtConfirmPassword">联系人</label>

            <asp:TextBox ID="linkman" runat="server" MaxLength="150" ></asp:TextBox>

        </p>   

          

        <p>           

              <asp:Button ID="btnSubmit" class="btn3_mouseout"  title="提交" runat="server"

                  Text="提交"  />

                 

<input type="hidden" name="btnSubmit" value=" 确定 " />

                  <input type="button"  id="btnCancel" value="取消"  />

                 

            

        </p>

    </fieldset>

</form>

</div>

</body>

</html>

 

 

 

1.event是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发

2.如果在提交前还需要进行一些自定义处理使用submitHandler参数，其它的都比较简单，自己看看API就成了.

3.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便.

4.rules，所有的检验规则都写在这个参数里面.

校验规则参数

格式为：  name : {rule1,rule2,...}     经过测试，用input标签的id是没有效果的，必须使用input标签的name

             (1) required: true            必输

             (2) number: true            只能输入数字(包括小数)

             (3) digits:true                只能输入整数

             (4) minValue: 3              不能小于3

             (5) maxValue: 100          最大不超过100

             (6) rangeValue:[50,100]  值范围为50-100

             (7) minLength: 5            最小长度(汉字算一个字符)

             (8) maxLength:   10       最大长度(汉字算一个字符)

             (9) rangeLength:[5,10]   长度范围为5至10位(汉字算一个字符)

             (10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件

             (11) email:true               电子邮件

             (12) equalTo: "#field"      与#field值相同

             (13) dateISO:true          日期型，格式为1998/01/22            1999-12-12

    required: true| false |（表达式）|（函数）           还可以是表达式和函数，函数返回true表示required有效，false表示required无效，返回【""】空对象表示true,返回【"  "】和【"wangwang"】等非空的对象为false


5.messages，自定义错误信息，格式与rules类似，需要注意的是如果使用此项，那么所有的校验项都必需自定义出错信息，如果只想定义其中的某一些，那么就把其它的出错信息定义为空（即""），系统即会使用默认值。



messages {
             password: {
                 required: "请输入您的密码."
                 minLength: "密码不能小于５位.",
                 maxLength: "密码不能长于32位."
             },


如何自定义校验规则：

可以通过自定义检验函数的方式新增加校验规则，步骤如下：

1. 在定义校验规则之前定义一个新的方法

2. 在rules中指定这个某个域使用此校验规则

3. 在messages中指定这个域使用此校验规则没有通过的提示信息



//这里定义了一个名为equal的规则
//value是指当前校验域的值
//element是指当前检验的域
//param是指在rules中设定的参数
//这三个参数会在进行校验时由系统自动带入
$.validator.methods.equal = function(value, element, param){
    //在这里使用上面的三个参数进行校验
    if(value == param)
        return true;//如果当前域的值等于指定的参数就通过校验
};

$('#form1').validate({
        rules:{
            field1:{equal:20}//在这里指定field1的检验规则是equal，并且参数是20
        },
        messages:{
            field1:{equal:'您的计算有误！'}//在这里定义field1的equal规则校验出错后的提示信息
        }
});


将校验规则写到控件中 　有时候我们的控件是动态生成的，这个时候就不可能提前先写好校验规则，需要在生成控件的同时写校验规则.

这样写校验规则有两种写法，一是将规则写到class属性中，二是将规则写到单独的validate属性中，其中：

写到class属性的写法如下，例子中在规则前添加了名为some, other, styles 的三个class：

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" ></textarea>