简介

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

（下载的附件中附有DEMO）

使用

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