你的位置:首页 > Java教程

[Java教程]简单地使用jquery的validate


简单地使用jquery的validate

                                     ——@梁WP

 

摘要:本文通过一个很简单的例子,讲解了jquery validate的最基础使用方式。

 

一、源代码

  注意事项都写在代码的注释里了,哈哈。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>lwp</title><!-- jquery,必须 --><script type="text/javascript" src="jquery-1.11.2.js"></script><!-- jquery的校验,必须 --><script type="text/javascript" src="jquery.validate.js"></script><!-- 额外下载的校验规则大全,可选 --><script type="text/javascript" src="additional-methods.js"></script><script>  $(function() {    /* 让表单使用jquery-validate的校验,必须 */    $("form").validate();    /* 用中文覆盖jquery-validate原有的英文提示,可选 */    jQuery.extend(jQuery.validator.messages, {      required : "不能为空",      email : "请输入正式的邮箱"    });    /* 自定义校验规则,可选 */    jQuery.validator.addMethod("lwp", function(value, element) {      if (value == "" || value == "liang") {        return true;      }      else {        return false;      }    }, "只能输入liang");  });    function check(){    /* 检查表单 */    if($("form").valid()) {      alert("提交成功");    }    else {      return false;    }  }</script><style>/* 自定义的错误提示样式,覆盖jquery-validate自带的错误提示样式,可选 */label.error {  color: #F00;  font-size: 12px;}</style></head><body>  <form>    <div>      <label for="email">邮箱</label>      <!-- required和email是jquery-validate自带的校验规则 -->      <input type="text" autocomplete="off" name="email" required="true" email="true">    </div>    <div>      <label for="author">作者</label>      <!-- lwp是自己定义的校验规则 -->      <input type="text" autocomplete="off" name="author" required="true" lwp="true">    </div>    <div>      <input type="button" onclick="check();" value="提交">    </div>  </form></body></html>

 

二、结果截图

  1、required的校验,截图如下:

    

  2、email和lwp的校验,截图如下:

    

  3、校验通过之后的提交,截图如下: