关于Jquery validate的使用总结

来源：互联网发布：化学词典软件编辑：程序博客网时间：2024/05/20 02:25

前段时间使用到了Jquery validate插件，在此做下总结。

主要使用到了普通验证和动态验证两种。

1.普通验证：

表单：

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!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/jquery-1.11.1.js"></script><script type="text/javascript" src="js/jquery.validate.min.js"></script><script type="text/javascript" src="js/index.js"></script><title>Insert title here</title></head><body><form id="inputForm" action="">姓名：<input type="text" name="name" id="name"/><br>年龄:<input type="text" name="age" id="age"/><br>地址:<input type="text" name="address" id="address"/><br>电话:<input type="text" name="phonenumber" id="phonenumber"/><br><input type="button" id="dd"><input type="submit"></form>  </body></html>

js代码：

$(document).ready(function() {$("#inputForm").validate({rules: {name: {required: true,rangelength: [1, 32]},age:{required: true,},address: {required: true,rangelength: [1, 32]},phonenumber: {required: true,}},messages: {name: {required: "姓名不能为空"},age: {required: "年龄不能为空"},address: {required: "地址不能为空"},phonenumber: {required: "电话不能为空"},},});})

普通验证没有什么可说的，rules和messages对应表单的输入框的name属性，上述例子只验证必填和长度，若有其他需要建议查看官方文档，里面的属性比较齐全。在表单提交时会触发验证，验证通过才能提交成功，要注意的是引入的jauery.js和validate.js的版本。建议在官网下载，里面的demo中就有。

2.自定义验证：

自定义验证方法一般和validate方法配合使用

自定义方法return true则表示验证通过，return false则表示验证不通过，如下userName只表示一个名字，可以随便起，自定义验证方法中写你的验证规则。

 jQuery.validator.addMethod("userName", function(value, element) {    return false;}, "用户名必须在5-10个字符之间");

对应的validate方法rules中的你需要验证的元素中加上userName即可，如下，表示验证name属性的时候userName也必须通过验证，即必须满足你的自定义验证方法。

name: {userName:truerequired: true,rangelength: [1, 3]}

自定义验证方法参数解释：value表示验证的组件的值，element表示验证的组件。

因此，也可以有下面这两种验证方式：

1.用element验证

如果验证的元素的值为‘123’则通过验证。

jQuery.validator.addMethod("userName", function(value, element) {   if($(element).val()=="123"){   return true;   }   else{   return false;   } }, "姓名必须为123");

判断name的值必须和age相等才能通过验证jQuery.validator.addMethod("userName", function(value, element) {if($(element).val()==$("#age").val()){ return true; } else{return false;}}, "姓名和年龄必须相等");

2.用value同理

如果验证的元素的值为‘123’则通过验证。

jQuery.validator.addMethod("userName", function(value, element) {   if(value=="123"){   return true;   }   else{   return false;   } }, "用户名必须在5-10个字符之间");

3.class相同，name不相同，即页面中有一些元素的class相同，name不相同。

可以用自定义方法，参数中的'niochinese'和元素的class相同，且name不能相同。下面这个方法验证所有class为nochinese的元素都不能输入中文。

jQuery.validator.addMethod("nochinese", function(value, element) {        return  !(/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(value));       }, "不能包含中文");

4.下面验证所有textarea

$("#inputForm").validate();    $("#res-type-text-content").find("textarea").each(function(){        $(this).rules( "add",{            required:true,            rangelength: [1, 128]            });    })注意：验证动态输入框的时候输入框必须要有name属性，且name属性不能相同，否则只会验证第一个

5.取消验证信息

点击name为style的radio时候取消所有验证信息。

$("input[type='radio'][name='style']").click(function(){        $("#inputForm").validate().resetForm();    })

0 0