使用jQuery validate插件验证表单

时间：2022-11-30 14:59:25

使用JQuery validate插件验证表单

常见的表单验证插件：
- validate
- Zebra Form
- jFormer
- jQuery.validVal
- Validity
- ValidForm Builder
- Ketchup
- Validatious
- Form Validator

浅析JQuery Validate插件：

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

jQuery Validate插件的使用：

  • 下载jQuery validate插件
    jQuery validate官网： https://jqueryvalidation.org/

  • 将validate引入你的项目

  • 使用jQuery validate插件验证表单
  • 将需要用到的jquery.js ,jquery.validate.min.js也引入页面，同时将location包下的message_zh.js也引入你的页面，因为默认的错误提示是英文版，故引入中文版本地化文件，在你没有定义错误提示的情况下，将使用默认中文版错误提示。
<script type="text/javascript src="validate/lib/jquery.js"></script>
<script type="text/javascript"
src="validate/dist/jquery.validate.min.js"></script>
<script type="text/javascript"
src="validate/dist/localization/messages_zh.js"></script>
  • 编写javascript验证方法
<script type="text/javascript">
 $().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
 $("#RegisterForm").validate({
 rules : {
 name : {
 required : true,
 },
 phone : {
 required : true,
 minlength : 11,
 isMobile:true
 },
 password : {
 required : true,
 minlength : 5
 },
 confirmpass : {
 required : true,
 minlength : 5,
 equalTo : "#password"
 }
 },
 messages : {
 name : {
 required : "请输入用户名",
 },
 phone : {
 required : "请输入手机号码",
 minlength : "手机号码长度不能小于 11 ",
 isMoblie:"请正确填写您的手机号码"
 },
 password : {
 required : "请输入密码",
 minlength : "密码长度不能小于 5 个字母"
 },
 confirmpass : {
 required : "请输入密码",
 minlength : "密码长度不能小于 5 个字母",
 equalTo : "两次密码输入不一致"
 }
 }
 });
 })
</script>
  • 因为jQuery validate API没有对手机号码的验证，但是提供自定义验证的方法addMethod：name, method, message，所以自定义验证手机号码的方法。
<script type="text/javascript">
//手机号码验证
 jQuery.validator
 .addMethod(
"isMobile",
function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element)
 || (length == 11 && mobile.test(value));
 }, "请正确填写您的手机号码")
</script>
  • 修改默认提示的样式，默认提示字体是黑色，可以将其设置为红色，jQuery validate默认将错误提示写在中，故可以修改如下：
<style type="text/css">
form label.error {
width: 200px;
margin-left: 8px;
color: Red;
}
</style>

结果如下：
使用jQuery validate插件验证表单

  • 总结：
    表单是每一个项目中必不可少的一部分，只要有表单就要有对表单的验证，然而表单的验证是一件很繁琐的事情，因此出现了很多的已封装好的对表单验证的插件，能很好地利用插件对我们项目的开发是相当有益处的。笔者对项目中用到的jQuery validate插件做以简单的总结，有错误之处，还请指教。
    注：根据表单元素的name属性

    -更多jQuery validate 参考资料

    https://jqueryvalidation.org/
标签：

相关文章