简介

ybValidForm.js是一款用于表单验证的JQuery插件，使用方便简单，同时还提供大量的定制选项。如果你正在从头开始构建新的东西，也可以很好的选择，但是当你试图将某个东西整合到现有的应用程序中时，它会有很多的标记。该插件与一组有用的验证方法，包括网址和电子邮件验证，同时提供了一个接口，以写自己的方法。

使用

1.  引入文件

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="./ybValidForm.js"></script>

2.  HTML

<div id="ybValidForm" >
  <img src='./yb.png' />
  <p>
    <label class="lable">用户名</label>
    <input type="text" class="_name" >
  </p>
  <p>
    <label class="lable">密码</label>
    <input type="password" class="_pwd" >
  </p>
  <p>
    <label class="lable">确认密码</label>
    <input type="password" class="_pwd2" >
  </p>
  <p>
    <label class="lable">邮箱</label>
    <input type="text" class="_email" >
  </p>
  <p>
    <label class="lable">QQ</label>
    <input type="text" class="_Qq" >
  </p>
  <p>
    <label class="lable">真实姓名</label>
    <input type="text" class="_realname" >
  </p>
  <p>
    <label class="lable">城市</label>
    <select  class="_city" >
      <option value="">所在城市</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
  </p>
  <p>
    <input type="checkbox" class='_hobby' name="hobby[]" value="音乐">
    <label for="it1">阅读</label>
    <input type="checkbox" class='_hobby' name="hobby[]" value="电影">
    <label for="it1">运动</label>
    <input type="checkbox" class='_hobby' name="hobby[]" value="运动">
    <label for="it1">电影</label>
    <input type="checkbox" class='_hobby' name="hobby[]" value="阅读">
    <label for="it1">音乐</label>
  </p>
  <p>
    <label class="_label">性别：</label>
    <input type="radio" class='_gender' value="1" id="male"  name='sex'>
    <label for="male">男</label>
    <input type="radio" class='_gender' value="2" id="female" name="sex" >
    <label for="female">女</label>
  </p>
  <p>
    <button>注册</button>
  </p>
</div>

[CSS]
<style>
  *{padding: 0;margin: 0;}
  html,body{width: 100%;background: #fff;font-family:"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif}
  input {margin-bottom: 20px;}
  button {width: 60px;height: 34px;line-height: 34px;cursor: pointer;font-size: 16px;outline:none;}
  /* #ybValidForm-core-style */
  #ybValidForm .right2{ color:red; padding-left:20px; white-space:nowrap; background:url(./right2.png) no-repeat left center;}
  #ybValidForm .err2{ color:red; padding-left:20px; white-space:nowrap; background:url(./err2.png) no-repeat left center;}
</style>

3.  调用

<script>
  $('#ybValidForm button').click(function(){
    $.ybValidForm({
      ruleAdd:([
        {node:"._name", ruleType:"account",errmsg:"字母开头，6-16字符，字母数字下划线"},
        {node:"._pwd", ruleType:"pwd",errmsg:"字母开头，长度在6~18之间，只能包含字符、数字和下划线"},
        {node:"._pwd2",node2:"._pwd", ruleType:"isEq",errmsg:"两次输入的密码不一致"},
        {node:"._Qq", ruleType:"isQq",errmsg:"请输入正确的QQ号"},
        {node:"._realname", ruleType:"isChinese",errmsg:"请输入正确的中文名"},
        {node:"._email", ruleType:"email",errmsg:"请填写正确的邮箱"},
        {node:"._hobby",ruleType:"checkbox",errmsg:"请选择爱好"},
        {node:"._gender",ruleType:"radio",errmsg:"请选择性别"},
        {node:"._city",ruleType:"select",errmsg:"请选择所在城市"},
      ]),
      tipsStyle:'tipsStyle1',
    })
  });
</script>

相关链接

Gitee 地址 ：https://gitee.com/jdtest/ybValidForm/tree/master