支持Html5的Jquery表单验证

前言：Html5和css3已经走入视线。html5新增了很多东西，比如表单元素的类型，验证等等，但是现在诸多浏览器还不兼容html5的新特性，故此，使用jquery加以验证。

等大部分浏览器支持html5，页面不用修改，直接删除jquery插件就可以继续使用。

注意：1、本例使用的jquery插件是jquery.tools.min.js，最好使用包含jquery基础包的完整版本。
　　　2、本例中的验证，在火狐，ie7、8、9，Safari中测试了，可以用。
　　 3、表单提交使用Submit按钮

花了好久调试的，希望对看到的人有用。如果有错误，欢迎指正。

Jquery_Validator_Exampes

1、基础示例

效果图：

Html代码：

View Code

<form id="from1">        
        <table width="500" border="0" cellpadding="4" cellspacing="4">
        <tr>
            <td colspan="2"><div align="center" >本例包含 A-E 的内容</div></td>
          </tr>
            <tr>
            <td width="120">name </td>
            <td ><input type="text"  name="name"  placeholder="name" min="5" man="50" onFocus="$(this).select()"/></td>            
          </tr>
          <tr>
            <td >email </td>
            <td ><input type="email" required="required" name="email" /></td>            
          </tr>
          <tr>
            <td>website </td>
            <td><input type="url" required="required" name="url"/></td>
            
          </tr>
            <tr>
            <td>age</td>
            <td><input type="number" name="age"  pattern="[0-9]"  data-message="请输入0-9的数字"/></td>
            
          </tr>
        <tr>
            <td>time</td>
            <td><input type="time" name="time"  data-message="Please fill in the correct time"  /></td>
            
          </tr>
            <tr>
            <td>Password </td>
            <td> <input type="password" name="password"  required="required" /></td>
         </tr>
          <tr>
            <td>Password check</td>
            <td><input type="password" name="check" data-equals="password" /></td>            
          </tr>
          <tr>
            <td>Hobby</td>
            <td><input name="Hobby" type="checkbox"  class="checkbox" id="hoddy" value="01" group="mHobby">sleep</input><br/>
            <input name="Hobby" type="checkbox"  class="checkbox" id="hoddy" value="02" group="mHobby">Swimming</input><br/>
            <input name="Hobby" type="checkbox"  class="checkbox" id="hoddy" value="03" group="mHobby">Run</input>
            </td>            
          </tr>    
          <tr>
            <td>Sex</td>
            <td><input name="sex" type="radio" class="radio" value="0" checked>Man
                <input type="radio" name="sex" value="1" class="radio">Woman</td>            
          </tr>    
           <tr>
            <td>Other</td>
            <td><textarea cols="20" rows="5" required="required" data-message="Write something"></textarea></td>            
          </tr>      
           <tr>
            <td>Country</td>
            <td><select name="select" required="required">
                <option selected value="0">请选择</option>
              <option value="111">中国</option>
              <option value="222">英国</option>
              <option value="333">美国</option>
            </select></td>            
          </tr>
           <tr>
            <td>Area</td>
            <td><select name="select2" size="5" multiple required="required">                
              <option value="111">北京</option>
              <option value="222">上海</option>
              <option value="333">广州</option>
            </select></td>            
          </tr>
          <tr>
            <td>I accept the terms</td>
            <td><input type="checkbox" id="accept" required="required" class="checkbox" /></td>            
          </tr>
          <tr>
            <td></td>
            <td><input type="Submit" class="btn" value="Submit" /></td>            
          </tr>
      </table>
      <br/>
        
    </form>

A、常用html5增加的input类型包括：email、url、number、time.

B、常用html5增加的input属性包括：required（必填）、pattern（验证正则表达式）、data-message（错误提示）、min（最小长度）、max（最大长度）、data-equals（判断两个输入框值是否一致，常用于密码框的2次输入）

C、使用jquery验证：没有特殊样式需求，在表单后面调用下面的方法：

$("#from1").validator();

D、当input类型为time时，在支持html5的浏览器中，输入框自动识别输入格式，在不支持html5的浏览器中，使用以下代码：

$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) {
return /^\d\d:\d\d$/.test(value);
});

$.tools.validator.fn()的三个参数分别是：input类型，错误提示，函数

E、当data-equals属性出现时，在支持html5的浏览器中，自动验证两个输入框值是否相等，在不支持html5的浏览器中，使用以下代码：

$.tools.validator.fn("[data-equals]", "Different value and $ 1", function(input) {
   var name = input.attr("data-equals"),
      field = this.getInputs().filter("[name=" + name + "]");
   return input.val() == field.val() ? true : [name];
});

$.tools.validator.fn()的参数中‘$1’代表 data-equals 的值

F、国家选项为菜单类型，没有直接可以用的验证方法，使用以下代码：

$.tools.validator.fn("[name=select]", "Please select a value", function(input, value) {
   if( value == "0"){
       return false;
   }else{
       return true;
   }
});

再举个例子：验证id为name的文本框。

$.tools.validator.fn("[id=name]", "该品牌已存在", function(input, value) {
    if(isBrandExists()){
           return false;
     }else if(isBrandHasRel()){
           return false;
     }else{
          return true;
     }
});

isBrandExists()和isBrandHasRel()方法是含有业务逻辑的验证。

2、错误提示位置修改示例

效果图：

html代码：

View Code

<form id="from2">        
        <table width="500" border="0" cellpadding="10" cellspacing="10">
        <tr>
            <td colspan="2"><div align="center">本例包含 G 的内容</div></td>
          </tr>
          <tr>
            <td width="90">email <span class="star">*</span></td>
            <td><input type="email" required="required" name="email" /></td>            
          </tr>
          <tr>
            <td>website <span class="star">*</span></td>
            <td><input type="url" required="required" name="url"/></td>            
          </tr>
            <tr>
            <td>age <span class="star">*</span></td>
            <td><input type="number" name="age"  pattern="[0-9]"  data-message="Please fill in the correct number"/></td>            
          </tr>    
          <tr>
            <td>I accept <span class="star">*</span></td>
            <td><input type="checkbox" id="accept" required="required" class="checkbox" /></td>            
          </tr>
           <tr>
            <td></td>
            <td><input type="Submit" class="btn" value="Submit" /></td>
            
          </tr>    
      </table>    
    </form>

G、错误提示的位置可以不同，可以设置不同的提示框样式。使用以下代码：

$("#myform2").validator({
   position: 'top left', //提示框出现的位置。一共有8个方位
   offset: [-12, 0],//提示框的偏移量
   message: '<div><em/></div>'//提示文字的容器，这里的<em/>是为了美观设置的箭头，一般使用<div></div>
})

用到的css样式如下：

.error {    padding: 4px 8px; border: 1px solid #ffff99; height: 16px; color:#336699; font-size: 12px; display: none; background-color: #ffff99; vertical-align:middle;
     -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-topleft: 0; -moz-box-shadow: 0 0 6px #ddd; -webkit-border-top-left-radius: 0; 
     -webkit-box-shadow: 0 0 6px #ddd; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; 
}
.error em {    border-width: 10px; border-style: solid; border-color:#ffff99 transparent transparent; width: 0px; height: 0px; bottom: -20px; display: block; position: absolute;}

3、错误框标红示例

效果图：

html代码：

View Code

<form id="from3">        
        <table width="500" border="0" cellpadding="10" cellspacing="10">
        <tr>
            <td colspan="2"><div align="center">本例包含 H 的内容</div></td>
          </tr>
          <tr>
            <td width="80">email <span class="star">*</span></td>
            <td><input type="email" required="required" name="email"  data-message="请输入正确的电子邮件"/></td>            
          </tr>
          <tr>
            <td>website <span class="star">*</span></td>
            <td><input type="url" required="required" name="url"  data-message="请输入正确的url"/></td>            
          </tr>
            <tr>
            <td>other </td>
            <td><input type="text" name="text"  /></td>            
          </tr>        
          <tr>
            <td></td>
            <td><input type="Submit" class="btn" value="Submit" /></td>            
          </tr> 
      </table>        
</form>

H、出现错误时，给输入框加上醒目的样式。使用以下代码：

$("#myform3").bind("onFail", function(e, errors) {
   if (e.originalEvent.type == 'submit') {
       $.each(errors, function() {
           var input = this.input;
           input.css({border: 'red 1px solid'}).focus(function() {//这里为输入错误的样式
               input.css({borde: '#ccc 1px solid'});//这里为输入正确后的样式
           });
       });
   }
});

4、仿服务器验证示例（含有业务逻辑的验证也可以这样写）

效果图，图1为验证成功，图2为验证失败
图1
图2

html代码：

View Code

<form id="from4">        
        <table width="500" border="0" cellpadding="10" cellspacing="10">
        <tr>
            <td colspan="2"><div align="center">本例包含 I 的内容</div></td>
          </tr>
          <tr>
            <td width="80">name <span class="star">*</span></td>
            <td> <input type="text" name="name" pattern="[a-zA-Z ]{5,}" id="name2" data-message="请输入至少5位的英文名字" /> </td>            
          </tr>
         <tr>
            <td>age <span class="star">*</span></td>
            <td><input type="number" name="age"  pattern="^\d+[\.\d]?\d{0,2}$"   data-message="请输入2位数字"/></td>            
          </tr>         
          <tr>
            <td></td>
            <td><input type="Submit" class="btn" value="Submit" /></td>
            <td></td>
          </tr>
      </table>        
    </form>

I、模拟后台验证。使用以下代码：

这是在前台基本验证通过以后再到服务器验证数据。

$("#from4").validator().submit(function(e) {
  var form = $(this);
  // 如果客户端验证通过
  if (!e.isDefaultPrevented()) {
    $.getJSON("js/server-fail.js", function(json){
      // 服务器端验证通过，就跳转
      if ($("#name2").val()=="qwert") {
        form.load("success.html");
      // 服务器端验证失败，使用json中的信息验证
      } else {
        form.data("validator").invalidate(json);
      }
    });
    //禁止默认提交
    e.preventDefault();
  }
});