Home > Web Front-end > JS Tutorial > How to use Jquery form validation plug-in formValidator_jquery

How to use Jquery form validation plug-in formValidator_jquery

WBOY
Release: 2016-05-16 15:07:00
Original
2791 people have browsed it

使用步骤:

1.首先在项目中添加必备js与css

 

2.代码中添加引用(必备引用)

  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库-->
  <script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必须库-->
  <script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩展库-->
  <link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表单验证样式表-->
Copy after login

3.中要验证的标签(做一些常用的演示)

<table border="0px" style="font-size:12px">
 <tr> 
   <td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>
  </tr>
  <tr> 
   <td align="right">身份证(正则表达式库):</td>
   <td><input name="sfz" type="text" id="sfz" /></td>
   <td><div id="sfzTip" style="width:300px"></div></td> <!--必须注意这里提示验证信息中的div的id值,跟要验证控件中的id值多了一个Tip,下面的都是这样。必须多的是Tip,也必须要多。-->
  </tr>
  <tr> 
   <td align="right">身份证(外部函数):</td>
   <td><input type="text" id="sfz1" style="width:120px" /></td>
   <td><div id="sfz1Tip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">整数:</td>
   <td><input type="text" id="zs" style="width:120px" /></td>
   <td><div id="zsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">正整数:</td>
   <td><input type="text" id="zzs" style="width:120px" /></td>
   <td><div id="zzsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">负整数:</td>
   <td><input type="text" id="fzs" style="width:120px" /></td>
   <td><div id="fzsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">数字:</td>
   <td><input type="text" id="sz" style="width:120px" /></td>
   <td><div id="szTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">正数(正整数 + 0):</td>
   <td><input type="text" id="zs1" style="width:120px" /></td>
   <td><div id="zs1Tip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">负数(负整数 + 0):</td>
   <td><input type="text" id="fs" style="width:120px" /></td>
   <td><div id="fsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">浮点数:</td>
   <td><input type="text" id="fds" style="width:120px" /></td>
   <td><div id="fdsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">正浮点数:</td>
   <td><input type="text" id="zfds" style="width:120px" /></td>
   <td><div id="zfdsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">负浮点数:</td>
   <td><input type="text" id="ffds" style="width:120px" /></td>
   <td><div id="ffdsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">非负浮点数(正浮点数 + 0):</td>
   <td><input type="text" id="fffds" style="width:120px" /></td>
   <td><div id="fffdsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">非正浮点数(负浮点数 + 0):</td>
   <td><input type="text" id="fzfds" style="width:120px" /></td>
   <td><div id="fzfdsTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">颜色:</td>
   <td><input type="text" id="ys" style="width:120px" /></td>
   <td><div id="ysTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">你的EMAIL:</td>
   <td><input type="text" id="email" style="width:120px" /></td>
   <td><div id="emailTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">手机:</td>
   <td><input type="text" id="sj" style="width:120px" /></td>
   <td><div id="sjTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">邮编:</td>
   <td><input type="text" id="yb" style="width:120px" /></td>
   <td><div id="ybTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">非空:</td>
   <td><input type="text" id="fk" style="width:120px" /></td>
   <td><div id="fkTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">图片:</td>
   <td><input type="text" id="tp" style="width:120px" /></td>
   <td><div id="tpTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">压缩文件:</td>
   <td><input type="text" id="rar" style="width:120px" /></td>
   <td><div id="rarTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">ip4:</td>
   <td><input type="text" id="ip4" style="width:120px" /></td>
   <td><div id="ip4Tip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">QQ号码:</td>
   <td><input type="text" id="qq" style="width:120px" /></td>
   <td><div id="qqTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">国内电话:</td>
   <td><input type="text" id="dh" style="width:120px" /></td>
   <td><div id="dhTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">用户名:</td>
   <td><input type="text" id="yhm" style="width:120px" /></td>
   <td><div id="yhmTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">字母:</td>
   <td><input type="text" id="zm" style="width:120px" /></td>
   <td><div id="zmTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">大写字母:</td>
   <td><input type="text" id="dxzm" style="width:120px" /></td>
   <td><div id="dxzmTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">小写字母:</td>
   <td><input type="text" id="xxzm" style="width:120px" /></td>
   <td><div id="xxzmTip" style="width:300px"></div></td>
  </tr>
  <tr> 
   <td align="right">身份证:</td>
   <td><input type="text" id="sfz" style="width:120px" /></td>
   <td><div id="sfzTip" style="width:300px"></div></td>
  </tr>
 </table>
Copy after login

4.

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template