jquery实现表单验证简单实例演示

下面是关于"jquery实现表单验证简单实例演示"的完整攻略。

什么是jquery表单验证

jquery是一个Javascript库，可以简化JavaScript编写等操作具体内容往往使用jQuery编写的，它可以使JavaScript的大量编码变得轻松愉快。jquery表单验证就是使用jquery库来实现对表单的验证功能，包括对用户输入的内容进行格式、合法性验证等。

jquery表单验证的实现

要实现jquery表单验证，需要以下步骤：

1. 引入jquery库和用于表单验证的jquery插件
2. 编写HTML表单代码，加入相应的表单控件（如input、select等）
3. 将jquery插件应用到表单上
4. 编写jquery代码进行表单验证

示例1.基本表单实现

下面是简单的表单实现，包含了用户名、密码、确认密码和描述4个表单项。

HTML代码：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <label for="confirm_password">确认密码：</label>
  <input type="password" id="confirm_password" name="confirm_password">
  <br>
  <label for="description">个人描述：</label>
  <textarea id="description" name="description"></textarea>
  <br>
  <button type="submit">提交</button>
</form>

注意，表单控件都需要有id和name属性，这是进行验证的关键。

jquery代码：

首先会引入jquery库和jquery.validata插件：

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>

然后，就可以将jquery插件应用到表单上：

$("form").validate();

最后，可以针对每个表单控件编写具体的验证规则：

$("#username").rules("add", {
      required: true,
      minlength: 6,
      messages: {
        required: "用户名不能为空",
        minlength: "用户名长度不能小于6"
      }
});

$("#password").rules("add", {
      required: true,
      minlength: 6,
      messages: {
        required: "密码不能为空",
        minlength: "密码长度不能小于6"
      }
});

$("#confirm_password").rules("add", {
      required: true,
      equalTo: "#password",
      messages: {
        required: "确认密码不能为空",
        equalTo: "两次输入的密码不一致"
      }
});

$("#description").rules("add", {
      required: true,
      messages: {
        required: "个人描述不能为空"
      }
});

代码含义：

• required: 表示该字段必填
• minlength: 表示该字段最少需要输入的长度
• equalTo: 表示与哪个字段相等
• messages: 表示验证失败时的提示信息。

示例2.自定义验证规则

除了以上基本的表单验证规则之外，还可以自定义验证规则。比如，以下有一个自定验证规则，用于限定密码必须包含数字和字母：

$.validator.addMethod("passwordCheck", function(value, element) {
    return this.optional(element) || /(?=[A-Za-z])(?=\d)(?=.*[!@#$%^&*()_+}{":;'?/>.<,|\]\[=-])/.test(value);
  }, "密码必须包含字母和数字以及至少一个特殊字符");

然后，将该规则应用到密码控件上：

$("#password").rules("add", {
    passwordCheck: true,
    minlength: 6,
    required: true,
    messages: {
      passwordCheck: "密码必须包含字母和数字以及至少一个特殊字符"
    }
});

总结

以上是jquery表单验证的一个简单实例演示，基本步骤包括引入jquery库和jquery插件、编写HTML表单代码、应用插件和编写相应的验证规则。在实际开发中，根据具体的需求，可以定制更加精细和复杂的验证规则，提高用户体验和数据安全性。