当前位置: 代码迷 >> Web前端 >> jquery.validate 学习札记(验证form表单工具)
  详细解决方案

jquery.validate 学习札记(验证form表单工具)

热度:588   发布时间:2013-10-22 16:16:51.0
jquery.validate 学习笔记(验证form表单工具)

在网上找了一些资料,很多对表单验证的工具需要指明表单的控件的name 或者 id,就需要自己写JS代码来指明哪些控件需要添加校验,如果页面很多,自己JS的工作量还是比较大的,还不如自己写代码去校验,因此我选择了jquery.validate.js这个工具,它只需要在控件中添加对应的属性就可以了,不需要再写JS代码去指明哪些控件需要校验表单内容。

?

修改默认提示信息的方法

/* 默认提示信息
var messages = {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
}
*/

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} 的值")
	});

?

自己写的demo,仅仅是在控件端添加属性验证表单内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/util/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/util/jquery.validate.min.js"></script>
<title>Insert title here</title>
</head>
<body>

<br>

<form action="" id="myform">
<fieldset>
	必须填写:<br>
	<input type="text" name="a" required><br>
	<br>
	
	minlength="2"  maxlength="5" 必须填写,最小长度是2,最大长度是5:(汉字算一个字符)<br>
	<input id="cname" name="name" minlength="2" minlength="2"  maxlength="5" type="text"  /><br>
	<br>
	
	rangelength="5,10"   输入的内容长度必须在5-10之间:(汉字算一个字符)<br>
	<input id="range" name="range" rangelength="5,10" /><br>
	<br>
	
	min="11" max="22"  必须填写,数字最小值为11,最大值为22:<br>
	<input id="num" name="num" min="11" max="22" type="text"  /><br>
	<br>
	
	range="11,22" 必须填写,数字最小值为11,最大值为22:<br>
	<input id="num1" name="num1" range="11,22" type="text"  /><br>
	<br>
	
	equalTo="#mypassword" 两个密码一致校验:<br>
	mypassword:<input id="mypassword" name="mypassword" type="password"  /><br>
	repassword:<input id="repassword" name="repassword" type="password" equalTo="#mypassword" /><br>
	<br>
	
	number="true" 必须输入合法的数字:必须输入合法的数字(负数,小数) <br>
	<input id="number" name="number"   number="true" /><br>
	<br>
	
	digits="true" 必须输入整数:<br>
	<input type="text" digits="true" name="integer" id="integer" ><br>
	<br>
	
	email="true" EMAIL:<br>
	<input type="text" email="true" name="email" id="email" ><br>
	<br>
	
	url="true"   URL:(要有http(s)://www)<br>
	<input type="text" url="true" name="url" id="url" ><br>
	<br>
	
	date="true"   DATE日期:(2003/9/9),值校验格式,不会校验里面的数据,因此详细内容还是要自己校验<br>
	<input type="text" date="true" name="date" id="date" ><br>
	<br>
	
	dateISO="true"  dateISO日期:值校验格式,不会校验里面的数据,因此详细内容还是要自己校验<br>
	<input type="text" dateISO="true" name="dateISO" id="dateISO" ><br>
	<br>
	
	<font color="red">对上传文件格式进行校验:(这个问题还等待解决)</font><br>
	<input type="file" accept="png|txt" name="accept" id="accept" required><br>
	<input type="text" accept=".ppp" name="accept1" id="accept1" required><br>
	<br>
	
	<font color="red">备注:表单的id 和 name必须唯一,否则无法正确校验。</font>
		
	<input class="submit" type="submit" value="Submit"/>
	</fieldset>
</form>



</body>
</html>
<script>


$(function(){
	//指明校验哪个表单,因为一个页面可以有多个表单
	$("#myform").validate();
	//alert(1);
});
</script>

?

?上面的例子的确能够快速的校验表单,但是提示信息不够精细,不能够准确的提示用户,因此还有如下方法

?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/util/jquery-1.4.4.js">
        </script>
        <script type="text/javascript" src="js/util/jquery.validate.min.js">
        </script>
        <title>
            Insert title here
        </title>
    </head>
    
    <body>
        <br>
        <!-- 表单校验功能 -->
        <form class="cmxform" id="signupForm" method="get" action="">
            <fieldset>
                <legend>
                    字段校验、日历控件完整示例
                </legend>
                <table>
                    <tr>
                        <td>
                            <label for="username">
                                Username
                            </label>
                        </td>
                        <td>
                            <input id="username" name="username" />
                        </td>
                        <!-- 这里设置的校验信息显示的地方在下一个td中,可以自行修改 -->
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="password">
                                Password
                            </label>
                        </td>
                        <td>
                            <input id="password" name="password" type="password" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="confirm_password">
                                Confirm password
                            </label>
                        </td>
                        <td>
                            <input id="confirm_password" name="confirm_password" type="password" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="sex">
                                sex
                            </label>
                        </td>
                        <td>
                                男<input id="sex1" name="sex" type="radio" />
                               女 <input id="sex2" name="sex" type="radio" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email">
                                Email
                            </label>
                        </td>
                        <td>
                            <input id="email" name="email" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="upload">
                                Upload
                            </label>
                        </td>
                        <td>
                            <input type="file" name="upload" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="language">
                                language
                            </label>
                        </td>
                        <td>
                            <input type="checkbox" name="language" value="cn" />
                            汉语
                            <input type="checkbox" name="language" value="en" />
                            英语
                            <input type="checkbox" name="language" value="jp" />
                            日语
                            <input type="checkbox" name="language" value="ge" />
                            德语
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="book">
                                book
                            </label>
                        </td>
                        <td>
                            <select name="book" multiple="multiple">
                                <option value="en">
                                    英语书
                                </option>
                                <option value="cn">
                                    汉语书
                                </option>
                                <option value="jp">
                                    日语书
                                </option>
                                <option value="ge">
                                    德语书
                                </option>
                            </select>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="agree">
                                同意该协议
                            </label>
                        </td>
                        <td>
                            <input type="checkbox" class="checkbox" id="agree" name="agree" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="submit" type="submit" value="Submit" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>

</html>
<script>
    $(document).ready(function() {
        //通过id查找要进行校验的表单
        $("#signupForm").validate({
            //设置校验触发的时机,默认全是true。不要尝试去设置它为true,可能会有js错误。
            //onsubmit:false,
            //onfocusout:false,
            //onkeyup:false,
            //onclick:false,

            //验证通过后执行的动作
            //success:function(label){
            //    label.text("ok!").addClass("success");
            //},
            //手动设置错误信息的显示方式
            errorPlacement: function(error, element) {
                error.appendTo(element.parent().next());
                //    if ( element.is(":radio") )
                //        error.appendTo( element.siblings("span") );
                //    else if ( element.is(":checkbox") ){
                //        error.appendTo ( element.siblings("span") );
                //    }
                //        else
                //        error.appendTo( element.parent() );
            },
            rules: {
                username: {
                    required: true,
                    rangelength: [5, 7]
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                sex: {
                    required: true
                },

                email: {
                    required: true,
                    email: true
                },
                language: {
                    required: true,
                    rangelength: [2, 3]
                },
                book: {
                    required: true,
                    rangelength: [2, 3]
                },
                agree: "required",
                upload: {
                    required: true,
                    accept: "flv|jpg"
                }
            },
            //校验提示信息
            messages: {
                username: {
                    required: "请输入用户名",
                    rangelength: "用户名长度必须为{0}到{1}个字符或汉字"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码的最小长度是{0}个字符"
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码的最小长度是{0}个字符",
                    equalTo: "确认密码与密码不相等"
                },
                email: "请输入正确的邮箱",
                language: {
                    required: "该项必须填写",
                    rangelength: "请您选择{0}到{1}项语言"
                },
                book: {
                    required: "该项必须选择",
                    rangelength: "请您选择{0}到{1}本书"
                },
                agree: "您没有同意使用协议",
                upload: {
                    required: "请输入上传文件的路径",
                    accept: "上传文件的格式只能是 flv或jpg"
                }
            }
        });
    });
</script>

?

备注:

1、rules对象里面的key是表单的“name”和“id”,这里我们要求name与id对应起来。

2、message与rules对应起来,都是对应表单的名称

3、rules中的required表示是验证内容不能为空,message中的required表示给出内容为空的提示

  相关解决方案