创新实训——jQuery.Validate 框架的学习与使用

今天，在编写人脸识别系统注册界面过程中，需要实现一个表单验证的功能，起初我是并不知道 jQuery.Validate 这个东西的（qwq 原谅萌新的无知），于是开始自己编写js实现表单验证，但发现我的表单验证函数只能实现blur(当input失去焦点时才会触发)，忽略了一个重要的问题：没有实现在点击submit按钮时自动进行validate并且及时组织表单的提交。

下面是我自己实现的js方法：

<script>
$(document).ready(function(){
  $("#e-mail").blur(function(){
    if($("#e-mail").val().replace(/(^\s*)|(\s*$)/g, "")==""){
    	$("#e-mail").addClass("error");
    	$('#1').css("display","inline");
    }
    else{
	$("#e-mail").removeClass("error");
    	$('#1').css("display","none");
    }
  });
});
</script>

对应的html：

对应的css：

这个方法的实现非常简单，但相应的功能也十分局限，好在jquery自己提供了validate框架，封装了一系列js函数用以实现各种validate需求。以下是validate的默认规则和一些简单的用法：具体见http://www.runoob.com/jquery/jquery-plugin-validate.html

1.导入js库

<script src="__STATIC__/index/bootstrap/js/jquery.min.js"></script>
<script src="__STATIC__/index/bootstrap/js/jquery.validate.js"></script>
<script src="__STATIC__/index/bootstrap/js/messages_zh.js"></script>

messages_zh.js 为jquery validate 提供的中文信息提示包

2.默认规则

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true                 必须输入合法的数字(负数，小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(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

3.默认提示

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}.")
},

以下为我的实际应用：

js:

html:

css:

效果：

——————————————————————————————————

最终使用jquery validate实现了点击submit按钮自动进行form验证的功能，又学到了一个实用的前端框架！！！

创新实训——jQuery.Validate 框架的学习与使用

猜你喜欢