基于jquery的，简单的php 表单验证组件

来源：互联网发布：linux view 编辑：程序博客网时间：2024/05/17 23:54

一、Validate简介

最常使用JavaScript的场合就是表单的验证，找了很多插件,还有jquery官方的插件,感觉都有很多缺点,一个是太臃肿,另外就是使用不方便,不够简洁, 使用门槛高. 参考官方和内部高人方法,写了一个js校验类.可以自由使用,并且欢迎提意见和建议. 文件很小只有几百行

● 内置验证规则：拥有必填、数字、E-Mail、等内置验证规则。

● 自定义验证规则：可以很方便地自定义验证规则。

● 自定义验证信息。

● 实时验证：可以通过blur事件触发验证，而不仅仅在表单提交的时候验证。

● 一个页面支持多个表单同时验证

● 可以使用自定义函数

无学习成本! 代码很简洁.

二、使用方法:

引入表单验证类

定义错误提示类

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"type="text/javascript"></script>

<style>

form .error{color:red;background-color:#F7F7F7;}

form .right{ width:16px; padding-left: 16px; background:url("../images/right.gif") no-repeat;}

</style>

在需要验证的表单提交按钮增加 check="form1", 例如<input id="Button1" type="submit"value="提交"check="form1" />或者表单标签加<form action="" method="post" id="form1"check="form1"> check后面的form1是要验证的表单id号

对每个表单的检查核心的就是 <input type="text" rule="{type:'int',required:true,minLength:5,maxLength:10,msg:'请输入合法的QQ号码''}" value="12345"/>

类似这样了,添加一个属性rule,然后加入参数,例如上面的例子表示检查类型是int型,该项是必填的required:true,如果不是必填就可以去掉require属性,minlength表示最小长度为5,maxLength表示最大长度位10,如果校验不通过的提示信息用msg表示.

另外对于radio 和checkbox ,因为有多个所以可以添加一个<spanext="msg"></span>用来存放显示的消息,当然input也可以单独设置.

可以使用自定义函数,在rule 属性设置fn:'函数名', 函数名里面返回true 验证通过,返回false验证失败!自定义函数里面可以使用自己的ajax 等等..

三、使用实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表单校验测试</title>
   <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
   <script src="validate.js"></script>
   <style>
       form .error{color:red;background-color:#F7F7F7;}
       form .right{width:16px; padding-left: 16px; background:url("../images/right.gif") no-repeat;}
   </style>
   <script type="text/javascript">
       function test(obj,rule)   {
           console.log(rule);
           console.log(obj);
            return false;
          //return true;
       }

   </script>
</head>
<body>
   <form action="" method="post" id="form1">
<div>
       <table style="width: 455px">
         <tr>
             <td>QQ号码：</td><td>
            <input type="text" rule='{"type":"int","required":true,"minLength":5,"maxLength":10,"msg":"请输入合法的QQ号码"}' value="12345" />
            </td>
         </tr>
           <tr>
            <td>密码:</td>
            <td><input id="password" rule='{"required":true,"minLength":5,"maxLength":10,"msg":"密码长度5到10位"}' value="123456"/></td>
           </tr>
           <tr>
               <td>重复密码:</td>
               <td><input id="password2" type="text" rule="{equal:'password',msg:'您输入的密码不一致请重新输入'}" value="123456"/></td>
           </tr>
         <tr>
               <td>姓名:</td>
               <td><input id="txtUserName" type="text" rule="{type:'gbk', msg:'请输入正确的中文姓名'}" value="马大哈"/></td>
           </tr>
           <tr>
               <td>性别：</td>
               <td>
               <input id="Radio1" type="radio" name="rdoSex" />男
                   <input id="Radio2" type="radio" rule="{type:'radio',msg:'请选择性别'}" name="rdoSex"/>女
               <span style="display:none;" ext="msg" class="error"></span>
            </td>

           </tr>
           <tr>
               <td>电话:</td>
            <td> <input id="txtTelephone" rule="{required:true,type:'int',msg:'电话号码输入有误'}" type="text" value="1234"/></td>
           </tr>
           <tr>
               <td>Email:</td>
               <td><input id="txtEmail" rule="{type:'email',msg:'电子邮箱有误，如user@example.com'}" type="text" value="dd@sina.com"/></td>
           </tr>
           <tr>
               <td>年龄:</td>
               <td><input rule="{type:'int',max:'200',min:'18',msg:'请输入正确的200到18间的数字字符，如99'}" type="text" value="170"/></td>
           </tr>

         <tr>
               <td>邮政编码:</td>
               <td><input rule="{regular:'^[0-9]{6}$', msg:'邮政编码格式不正确'}" type="text" value="123456"/></td>
           </tr>

         <tr>
               <td>不能超过2000:</td>
               <td><input rule="{type:'int',max:'2000',msg:'消费限额不能高于2000'}" type="text" value="200"/></td>
           </tr>
           <tr>
            <td>城市:</td>
            <td>
          <select id="city" rule="{type:'select',msg:'请选择一个城市'}">
           <option value="0">select</option>
           <option value="1"selected>深圳</option>
           <option value="2">上海</option>
           <option value="3">北京</option>
            <option value="4">成都</option>
           <option value="5">广州</option>
          </select>
                </td>
           </tr>
         <tr>
               <td>爱好:</td>
               <td><input type="checkbox" name="interest"/>琴
         <input type="checkbox" name="interest" />棋
         <input type="checkbox" name="interest" />书
         <input type="checkbox" name="interest" rule="{type:'checkbox',msg:'请选择爱好'}"/>画
         <div style="display:none;" ext="msg" class="error"></div>
         </td>
           </tr>

           <tr>
           <td>
             </td>
           <td>
         <input type="checkbox" rule="{type:'checkbox',msg:'请阅读条款并选择同意'}" name="agree" checked/>我同意服务条款
         <div style="display:none;" ext="msg"class="error"></div></td>
           </tr>
           <tr>
               <td></td>
               <td><input id="Button1" type="submit" value="提交" check="form1" /></td>
           </tr>
       </table>
   </div>
   </form>
</body>
</html>

核心的validate.js 类，请将以下内容保存为validate.js文件

0 0