JQuery表单验证插件zfValidForm.js

简介

zfValidForm.js是一款JQuery表单验证插件，支持所有浏览。该插件有 2 种形式，有返回值，可以自定义添加删除表单中的内容，可扩展性好。

（下载的附件中附有DEMO）

使用

1.  引入文件

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

2.  HTML

<div id="zfValidForm" >
  <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>
    <input type="text" class="_real" >
  </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>
    //这是一个自定义添加
    <input type="checkbox" class='_hobby1' name="hobby1[]" value="音乐">
    <label for="it1">阅读</label>
    <input type="checkbox" class='_hobby1' name="hobby1[]" value="电影">
    <label for="it1">运动</label>
    <input type="checkbox" class='_hobby1' name="hobby1[]" value="运动">
    <label for="it1">电影</label>
    <input type="checkbox" class='_hobby1' name="hobby1[]" 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>

3.  调用

<script>
  $('#zfValidForm button').click(function(){
    $.zfValidForm({ vibconfig: {
      "tipsmsgvibTime": 500,//跳动表单提示跳动时间（ms）
      "tipsmsgFadeTime1": 6500,	//跳动表单提示消失时间（ms）
      'vebspeed':100,//跳动表单速度时间（ms）
      "tipsmsgFadeTimeo": 7000,	//表单提示消失时间（ms）
      tipsStyle:'1'	
    }, 
    ruleAdd:([
      {node:"._name", ruleType:"account",errmsg:"字母开头，6-16字符，字母数字下划线"},
      //这个个数要和表单个数一致(node是class名字加一个点)
      {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:"请选择所在城市"},	
      {node:"._real", ruleType:"other",errmsg:"请输入正确的中文名",condition:function(){return $('._real').val()==''? true:false}},
      //添加表单后 ruleType:"othor"需要加一个名字是condition的方法，这个方法要返回ture或者false
      {node:"._hobby1",ruleType:"othercheck",errmsg:"请选择爱好"},
      //如果是checkbox是这种添加方式 ruleType:"othercheck" 
    ]),
    tipsStyle:'2',//可以选择1或者2  1是隐藏  2是跳动后隐藏
  })
});
</script>

相关链接

Gitee 地址：https://gitee.com/zhufei888/zfValidForm2