Jquery表单验证

.代码中添加引用（必备引用）

    <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" /><!--表单验证样式表-->

3.<body>中要验证的标签（做一些常用的演示）

<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>

posted @ 2016-11-28 13:42 戳记阅读(150) 评论(0) 编辑收藏举报

戳记

Jquery表单验证

公告