表单校验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>

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

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

CheckForm.js

  • 2008年11月04日 13:09
  • 8KB
  • 下载

jquerycheckform很经典的例子

  • 2010年09月06日 01:19
  • 27KB
  • 下载

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

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

详解Jquery.form.js

2004 年 Gmail 像风一样的女子来到人间,很快 2005 年 Ajax 正式提出,作为Web开发重点的form自然也得到了恩惠。 最开始,我们使用ajax提交表单,统一采用的是jque...
  • shan9liang
  • shan9liang
  • 2014年11月29日 22:43
  • 3302

jquery.form.js使用实例

1、jsp页面
  • u010819416
  • u010819416
  • 2015年09月18日 17:16
  • 353

表单校验

一:前台校验
  • n_yan
  • n_yan
  • 2014年05月11日 17:45
  • 327

post表单数组数据验证

#当表单内容过多是,不可能一个一个来过滤,那怎么办呢#我想到的解决办法是 $patientinfo = $_POST;$t = array_keys(array_map('trim', $patie...
  • u010757785
  • u010757785
  • 2017年05月25日 11:14
  • 163

jQuery.Form.js 的用法

jQuery.Form.js 插件的作用是实现Ajax提交表单。   方法:   1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式。...
  • mss359681091
  • mss359681091
  • 2016年05月10日 22:13
  • 3582

JS and Jquery 操作Form表单

  • xw1985520
  • xw1985520
  • 2016年12月28日 22:06
  • 96
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表单校验jquery_checkform
举报原因:
原因补充:

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