jQuery Validate 表单验证

jQuery Validate

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

使用方法1:
将校验规则写到控件中(这个还是少用)


<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js">script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js">script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js">script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
script>
<style>
.error{
    color:red;
}
style>
head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字,邮箱,URL,备注。legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)label>
      <input id="cname" name="name" minlength="2" type="text" required>
    p>
    <p>
      <label for="cemail">E-Mail (必需)label>
      <input id="cemail" type="email" name="email" required>
    p>
    <p>
      <label for="curl">URL (可选)label>
      <input id="curl" type="url" name="url">
    p>
    <p>
      <label for="ccomment">备注 (必需)label>
      <textarea id="ccomment" name="comment" required>textarea>
    p>
    <p>
      <input class="submit" type="submit" value="Submit">
    p>
  fieldset>
form>
body>
html>

方法2将校验规则写到 js 代码中(推荐这个)

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    //规则
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
        //不满足规则时对应的提示
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

Validator

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容,下面列出几个常用的方法。

内置验证方式
名称 返回类型 描述
required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的结果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。
remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度范围 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格式。
range(range) Boolean 设置值的范围。
url() Boolean 验证 URL 格式。
date() Boolean 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。
dateISO() Boolean 验证 ISO 类型的日期格式。
dateDE() Boolean 验证德式的日期格式(29.04.1994 或 1.1.2006)。
number() Boolean 验证十进制数字(包括小数的)。
digits() Boolean 验证整数。
creditcard() Boolean 验证信用卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码。

validate ()的可选项

submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。

$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})

本文参考菜鸟教程

你可能感兴趣的:(jquery,javascript)