实用的jQuery表单验证

一款实用的jQuery表单验证，点击页面各个输入框，会有对应的提示文字出现在后面，填写正确也有对应的提示内容，可以重置清空所以已填信息。

分类：表单代码 > 注册登录框难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，简单设置样式后引入jQuery库和表单插件，代码如下：

<style type="text/css">
input{ color:#F60;}
.cs{ width:170px; height:20px;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/from.js"></script>

页面的body部分，需设置好form表单里面的输入和提示内容，代码如下：

<form action="#" method="post">
<p>用户：<input type="text" name="yhm" value=" "/> </p>
<p>密码：<input type="password"  name="pwd"/></p>
<p>确认：<input type="password"  name="pwd2"/></p>
<p>性别：<input  type="radio"  name="boy" value="xb"/>男
      <input  type="radio"  name="girl" value="xb"/>女
 </p>
 <p>生日：<input type="text"  name="Birthday" placeholder="格式：yyyy-mm-dd"  value=""/></p>
 <p>年龄：<input type="number"  name="age"/> </p>
 <p>证件：<input type="text" name="cd"  value="" placeholder="身份证/护照"/></p>
 <p>电话：<input type="number"  name="phone"/> </p>
 <p>邮箱：<input type="text"  name="email"/> </p>
 <p>城市：
    <select name="cs" class="cs">
       <option>请您选择所在的城市</option>
       <option>洛阳</option>
       <option>北京</option>
       <option>郑州</option>
       <option>杭州</option>
       <option>苏州</option>
       <option>信阳</option>
    </select>
 </p>
 <p><input type="submit" value="提交"/> <input type="submit" value="重置"/> </p>
</form>