jQuery表单验证插件formValidator(改进版)

jQuery表单验证插件formValidator(改进版)攻略

一、简介

jQuery表单验证插件formValidator是一款实用的前端验证插件，可以方便地验证表单输入是否符合指定的规则，从而提高用户输入数据的准确度，避免非法数据被提交。经过改进的formValidator拓展了原版的功能，增加了新的验证规则，如密码强度验证、手机号码验证等，同时去除了原版中的一些不必要的功能，让插件更为简洁、易用。

二、使用步骤

1. 引入相关文件

在HTML文档中引入jQuery、formValidator脚本与样式文件：

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="formValidator.css">
<script src="formValidator.js"></script>

1. 配置表单验证

对需要验证的表单元素进行配置，例如：

<form id="myForm">
  <input type="text" id="username" name="username">
  <input type="password" id="password" name="password">
  <input type="submit" value="提交">
</form>

$(function(){
  $("#myForm").formValidator({
    onValidated:function(valid, msg, error){//验证完成的回调函数
      if(valid){//验证通过则提交表单
        $("#myForm").submit();
      }else{//验证未通过则显示错误信息
        alert(msg);
      }
    },
    rules:{
      "username":{
        required:true,//必填项
        length:[0,20],//长度限制
        regex: "^[a-zA-Z][a-zA-Z0-9_]{3,19}$"//正则表达式验证
      },
      "password":{
        required:true,
        length:[6,20],
        regex:/^[a-zA-Z]\w{5,19}$/
      }
    }
  });
});

1. 触发表单验证

在表单提交前，调用formValidator的validate方法进行表单验证：

$("#myForm").validate();

三、常见验证规则

以下是formValidator常见的验证规则，具体可根据需求进行配置。

1. required

要求此项必填。

"username":{
  required:true
}

2. length

要求输入内容的长度符合指定范围。

"username":{
  length:[0,20]
}

3. regex

使用正则表达式对输入内容进行验证。

"username":{
  regex:/^[a-zA-Z][a-zA-Z0-9]{3,19}$/
}

4. email

要求输入内容符合邮箱格式。

"email":{
  email:true
}

5. phone

要求输入内容符合手机号码格式。

"phone":{
  phone:true
}

四、示例说明

示例一：表单验证

在下面的例子中，我们验证用户名、密码和确认密码是否符合指定规则。

<form id="myForm">
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  <input type="password" id="password" name="password" placeholder="请输入密码">
  <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入密码">
  <input type="submit" value="提交">
</form>

$(function(){
  $("#myForm").formValidator({
    rules:{
      "username":{
        required:true,
        length:[0,20],
        regex: "^[a-zA-Z][a-zA-Z0-9_]{3,19}$"
      },
      "password":{
        required:true,
        length:[6,20],
        regex:/^[a-zA-Z]\w{5,19}$/
      },
      "confirm-password":{
        required:true,
        equalTo:"#password"
      }
    }
  });

  $("#myForm").on("submit",function(){
    $("#myForm").validate();
    return false;
  });
});

示例二：修改提示信息

下面的例子中，我们修改了默认的提示信息。

<form id="myForm">
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  <input type="password" id="password" name="password" placeholder="请输入密码">
  <input type="submit" value="提交">
</form>

$(function(){
  $("#myForm").formValidator({
    rules:{
      "username":{
        required:true,
        length:[0,20],
        regex: "^[a-zA-Z][a-zA-Z0-9_]{3,19}$"
      },
      "password":{
        required:true,
        length:[6,20],
        regex:/^[a-zA-Z]\w{5,19}$/
      }
    },
    messages:{
      "username":{
        required:"用户名不能为空",
        regex:"用户名格式不正确"
      },
      "password":{
        required:"密码不能为空",
        regex:"密码格式不正确"
      }
    }
  });

  $("#myForm").on("submit",function(){
    $("#myForm").validate();
    return false;
  });
});

在messages对象中，定义了每个验证规则的提示信息，可以根据需求进行修改。