校验

很多提交表单的时候会用到表单验证

往往写JS有很麻烦或者考虑不周，现在有一个jquery插件叫：jquery.validate-1.13.1.js ，完美解决我们表单检验问题

第一步：先引入jquery，因为此插件是基于jquery扩展的，所以先引入jquery再引入jquery.validate-1.13.1.js

<!-- 第一步引入三个js文件 -->
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.metadata.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.validate.js"></script>

第二步：为form表单设定id，并且在表单上填写校验规则

2.1 为表单设定id

<form action="" method="get" id="formId">

2.2 设定校验规则

<!-- 第二步定义formId和校验规则 -->
    <form action="" method="get" id="formId">
        用户名：<input type="text" name = "username" class="{required:true,rangelength :[5,10]}"><br>
        email：<input type="text" name="email" class="{required:true,email:true}"><br>
        密码：<input type="password" name="password" class="{required:true,rangelength :[5,10]}"><br>
        确认密码：<input type="password" name="password2" class="{equalTo:'[name=password]'}"><br>
        <input type="submit" value="提交">
    </form>

因为equalTo比较的是表达式，所以用到了单引号

第三步：检验表单

<!-- 第三步,检验表单 -->
<script type="text/javascript">
	$(function(){
		$("#formId").validate();
	});
</script>

先预览一下

功能是实现了，但是怎么把提示转换成中文，并且显示成红色字体呢?

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

});

把这段代码直接复制粘贴到表单验证代码前面

<script type="text/javascript">
	$(function(){
		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} 的值")
		});
		
		$("#formId").validate();
	});
</script>

接下来再看一下表单情况：

ok，到这里字体已经改成中文

改进2：

更改字体显示的样式

因为jquery.validate插件显示错误提示消息是用

<label class="error"></label>

来显示的，所以，只需要修改这个标签的class属性就可以了

<style type="text/css">
	label.error{
		color: red;
		margin-left: 8px;
	}
</style>

最后的样式就是这样的：

到这里就基本完成了表单检验

====华丽丽的分割线====

刚用到jquery的这里个插件的童学肯定就有疑问了，我jquery也导入正确了，我的表单就不能验证呢？难道是是插件版本和query版本冲突？坑爹啊！！

原因是并不是版本冲突，而是在有的jquery.validate插件中没有jquery.metadata.js插件的声明。那怎么解决呢？

解决办法：

一、搜索jquery.validate.js文件中的$.validator.classRules(element)，并在其前加入此行

      

 $.validator.metadataRules(element),

        注意不要少了逗号

二、搜索 staticRules:   在其前面加入以下代码，增加metadata的支持:

       

metadataRules: function(element) {

if (!$.metadata) return {};

var meta = $.data(element.form, ’validator’).settings.meta;

return meta ?

$(element).metadata()[meta] :

$(element).metadata();

},

到这里，就改造完成了。

尽情的去使用吧。