表单校验jquery_checkform

原创 2011年01月10日 18:31:00

核心提示:参数一为表单项数组(Json方式),必需参数二为表单是否为手动调用验证结果,默认为true,即为自动验证submit事件,可选;参数三为验证信息采用Alert提示方式,默认为否,可选。-

------------------ 配置参数:----------------------

-------- 表单 --------

valid(fileds,isBindSubmit,isAlert)
参数一为表单项数组(Json方式),必需
参数二为表单是否为手动调用验证结果,默认为true,即为自动验证submit事件,可选;
参数三为验证信息采用Alert提示方式,默认为否,可选。


-------- 表单项数组 --------

name: 表单域的name,必需
type: 验证类型,可选
simple: 简单提示消息,只输入域的中文名 [推荐]
message: 完整的提示消息,替代简单提示消息
require:是否必填,默认为true,即必填,false为非必填,可选
to: 匹配值对比,对象的name,可选
value: 直接匹配值对比,有to则该值被忽略,可选
min:最小长度,可选
max:最大长度,可选
ajax: 为取得异步验证的结果的地址,可选

****** type验证类型如下: ******
eng: 英文
chn: 汉字
mail: 邮箱
url: 网址
currency: 货币
number: 数字
int: 整数
double: 浮点数
username:数字和英文及下划线和.的组合,开头为字母,4-20个字符
password: 数字和英文及下划线的组合,6-20个字符
safe:不含特殊字符
dbc: 含全角字符(汉字除外)
qq: 5-9位数字
date: 时间
year: 年
month:月
day: 日
hour: 小时
minute:分
second 秒
mobile:手机
phone:电话
zipcode: 邮编
bodycard: 身份证,支持15位、18位,x字母
ip: IP
file: 文件类型
image: 图片文件类型
word: 文档文件类型

**** 以下类型,需要有匹配对象或值 ****
eq: =
gt: >
gte:>=
lt: <
lte:<=

 

调用方法:

<script language="javascript" src="jquery-1.4.min.js"></script>
<script language="javascript" src="jquery.checkform.js"></script>
<script language="javascript">
$(function(){

    $("#form1").valid([
        //{ name:"username",type:"ajax",message:"用户名没有注册", url:"abc.asp" },
        { name:"username",type:"username",simple:"用户名"},
        { name:"password",type:"password",simple:"密码",min:8,max:16},
        { name:"password2",type:"eq",simple:"重复密码", to:"password" },
        { name:"english",type:"eng",simple:"英文域", require:false },
        { name:"chinese",type:"chn",simple:"中文域", require:false },
        { name:"email",type:"mail",simple:"邮箱" },
        { name:"url",type:"url",message:"地址信息不正确哦!" },
        { name:"checkbox",simple:"多选" },
        { name:"select",simple:"选择框" },
    ]);

})
</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="">
<table width="760" border="0">
  <tr>
    <td width="90" align="right">用户名</td>
    <td><input type="text" name="username" id="username" /></td>
  </tr>
  <tr>
    <td align="right">密码</td>
    <td><input type="password" name="password" id="password" /></td>
  </tr>
  <tr>
    <td align="right">重复密码</td>
    <td><input type="password" name="password2" id="password2" /></td>
  </tr>
  <tr>
    <td align="right">英文</td>
    <td><input type="text" name="english" id="english" /></td>
  </tr>
  <tr>
    <td align="right">中文</td>
    <td><input type="text" name="chinese" id="chinese" /></td>
  </tr>
  <tr>
    <td align="right">邮箱</td>
    <td><input type="text" name="email" id="email" /></td>
  </tr>
  <tr>
    <td align="right">网址</td>
    <td><input type="text" name="url" id="url" /></td>
  </tr>
  <tr>
    <td align="right">金额</td>
    <td><input type="text" name="currency" id="currency" /></td>
  </tr>
  <tr>
    <td align="right">数字</td>
    <td><input type="text" name="number" id="number" /></td>
  </tr>
  <tr>
    <td align="right">整数</td>
    <td>
      <input type="text" name="int" id="int" />
    </td>
  </tr>
  <tr>
    <td align="right">小数</td>
    <td><input type="text" name="double" id="double" /></td>
  </tr>
  <tr>
    <td align="right">QQ</td>
    <td><input type="text" name="qq" id="qq" /></td>
  </tr>
  <tr>
    <td align="right">时间</td>
    <td><input type="text" name="date" id="date" /></td>
  </tr>
  <tr>
    <td align="right">年</td>
    <td><input type="text" name="year" id="year" /></td>
  </tr>
  <tr>
    <td align="right">月</td>
    <td><input type="text" name="month" id="month" /></td>
  </tr>  
  <tr>
    <td align="right">日</td>
    <td><input type="text" name="day" id="day" /></td>
  </tr>
  <tr>
    <td align="right">小时</td>
    <td><input type="text" name="hour" id="hour" /></td>
  </tr>
  <tr>
    <td align="right">分/秒</td>
    <td><input type="text" name="stime" id="stime" /></td>
  </tr>
  <tr>
    <td align="right">电话号码</td>
    <td><input type="text" name="telphone" id="telphone" /></td>
  </tr>
  <tr>
    <td align="right">手机</td>
    <td><input type="text" name="mobile" id="mobile" /></td>
  </tr>
  <tr>
    <td align="right">身份证</td>
    <td><input type="text" name="idcard" id="idcard" /></td>
  </tr>
  <tr>
    <td align="right">邮编</td>
    <td><input type="text" name="zipcode" id="zipcode" /></td>
  </tr>
  <tr>
    <td align="right">IP</td>
    <td><input type="text" name="ip" id="ip" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="radio" name="radio" id="radio" value="1" />
      <label>项1</label>
      <input type="radio" name="radio" id="radio2" value="2" />
     <label>项2</label>
      <input type="radio" name="radio" id="radio3" value="3" />
      <label>项3</label>      </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="checkbox" type="checkbox" id="checkbox" value="1" />
    <label>项1</label>
    <input name="checkbox" type="checkbox" id="checkbox2" value="2" />
    <label>项2</label>
    <input name="checkbox" type="checkbox" id="checkbox3" value="3" />
    <label>项3</label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><select name="select" id="select">
      <option value="">请选择</option>
      <option value="1">项一</option>
      <option value="2">项二</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><textarea name="textarea" id="textarea" cols="40" rows="3"></textarea></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="button" id="button" value="Submit" />
      <input type="reset" name="button2" id="button2" value="Reset" /></td>
  </tr>
</table>
</form>
</body>
</html>

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

onclick="return checkForm()" 、onclick="checkForm();return false;"解析 与 return false;

return false不是取消事件冒泡,而是取消“浏览器默认行为”。 比如一个链接 http://zhidao.baidu.com">百度知道 当我们点击这个链接时,浏览器会自动跳转到:zhidao...

客户端表单通用验证CheckForm (转)

/**/ /*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ***                  ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

利用Jquery实现一个典型的form表单前端验证

前端验证有各种插件,也有各种实现方式,可谓八仙过海,各显神通,几乎看到的每个人的验证方式都有所区别,本例仅作示例,做到html、css、js的解耦合,又兼顾移开光标就显示错误信息的用户体验。 注:本例...
  • bboyjoe
  • bboyjoe
  • 2016年07月03日 02:57
  • 3049

jquery加强和表单校验插件的使用

  • 2017年11月16日 23:07
  • 170KB
  • 下载

jquery表单校验

  • 2015年12月11日 17:45
  • 38KB
  • 下载

jQuery表单校验 Validation

使用到的插件: jquery.js jquery.tools.js jquery.validate.js jquery.validate.methods.js 1、html页面(使用到...
  • zmm0420
  • zmm0420
  • 2015年12月09日 19:48
  • 243
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表单校验jquery_checkform
举报原因:
原因补充:

(最多只允许输入30个字)