表单校验jquery_checkform

最新推荐文章于 2020-04-08 16:30:57 发布
最新推荐文章于 2020-04-08 16:30:57 发布
阅读量3.8k 收藏
点赞数
分类专栏： javascript 文章标签： jquery javascript button url mobile email
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fjun0910/article/details/6127565
版权

核心提示：参数一为表单项数组（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>
fjun0910
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[JavaScript JQuery实现] 用你的方式来进行表单校验
SolarL的博客
05-11 805
表单简单校验的两种实现写在前面1. JavaScript 实现表单校验2 . JQuery 实现表单校验 写在前面 本篇主要讲述如何实现简单的表单校验，通过 JavaScript 和 JQuery 两种方式来是实现。 主要通过 DOM 操作和触发事件以及简单的逻辑进行判断来较好的实现。 1. JavaScript 实现表单校验 <1> 建立 form 表单 通过建立 form 表...
使用JQuery插件Validate对表单进行校验
m0_47623239的博客
06-11 338
使用JQuery插件Validate对表单进行校验 引入插件Validate 在web工程中引入validate 工具包 引入js文件。 <!-- 加入jQuery --> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <!-- 加入jQuery插件 --> <script src="js/jquery.validate.min.js" type="text
jQuery Validate表单校验插件
sinat_23228689的博客
09-05 402
简介 jQuery Validate插件可实现客户端的表单验证。 提供了一系列的默认校验规则。 允许用户编写自定义的校验规则（通过插件提供的API实现）。 使用方法 引入jQuery Validate依赖 <!-- jquery-validate --> <!-- 核心代码 --> <script src="https://cdn.bootcss...
Jquery_Validate 表单校验的使用
weixin_33953249的博客
09-17 108
一、效果图： 二、JqueryValidate的好处 在做注册、或者类似以上的表单提交的时候，大家是不是都很烦那种，把数据拿到后台去判断， 可能经过了正则表达式之类的复杂判断，然后发现数据错误。接着通过request转发到页面上，再通过EL 表达式输出错误信息。实话实话，在没发现这个插件之前，我是这么干的，好痛苦的感觉。 JqueryValidate的好处就在...
jQuery—正则表达式提交表单校验
qq_42219004的博客
04-08 344
表单校验 表单校验，可以减轻对服务端的访问次数 a.获取要校验的元素值(选择器) 用户名、密码 b.通过 字符串处理方法、或者 正则表达式等手段 进行校验 “aaa@abc.com”.indexOf("@") !=-1 c.触发校验的方法或事件（校验时机） blur()：失去焦点时触发 submit()：当点击表单的 “提交submit”按钮时触发 submit()的返回值 会决定表单是否跳转，如...
[知了堂学习笔记]_Jquery_Validate 表单校验的使用[知了堂学习笔记]_Jquery_Validate 表单校验的使用
GET_CHEN的博客
09-25 248
一、效果图：   二、JqueryValidate的好处  在做注册、或者类似以上的表单提交的时候，大家是不是都很烦那种，把数据拿到后台去判断， 可能经过了正则表达式之类的复杂判断，然后发现数据错误。接着通过request转发到页面上，再通过EL 表达式输出错误信息。实话实话，在没发现这个插件之前，我是这么干的，好痛苦的感觉。 JqueryVal
jquery获取表单元素与回显
悦分享
12-16 2107
一、获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 &lt;script type="text/javascript"&gt; function fun(){ document.all[11].innerHTML = "你好" ; d...
使用jquery的validate插件实现表单校验
ginger_mr的博客
03-02 672
使用jquery的validate插件实现表单校验 validate介绍 一款优秀的表单验证插件——validation插件 特点： 1.内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则 2.自定义验证规则：可以很方便的自定义验证规则 3.简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能 4.实时验证：可以通过keyup或bulr事件触...
jQuery基础之表单验证
追本溯源的专栏
12-10 6247
学习jquery-validate.js时的一些的记录
checkForm_表单验证_javascript_
10-02
本资源"checkForm_表单验证_javascript_"专注于使用纯JavaScript实现这一功能，对于JavaScript初学者来说是一个很好的实践项目。 JavaScript是一种广泛使用的客户端脚本语言，它在浏览器环境中运行，可以动态地更新...
CF_CheckForm-开源
05-02
`CheckForm_javascript.cfm`很可能是JavaScript版本的表单验证函数，与服务器端的`CheckForm.cfm`相配合，形成完整的双端验证机制。 总的来说，CF_CheckForm提供了一个强大且灵活的工具，帮助开发者在Web应用中实现...
jquery-checkform:一个简单的表单验证jquery插件
06-23
Jquery 校验表插件 厌倦了 javascript 表单验证？ 这个 Jquery 插件提供了各种 HTML 表单验证样式（事件、ui 样式、ajax...）。 它还包括一组要检查的最常见字段的默认模式。 如何使用它 ？ Jquery checkform 插件...
jquery-checkform
06-19
`jquery-checkform` 是一个基于 jQuery 的插件，主要用于表单验证。在Web开发中，表单验证是非常重要的一环，它确保用户输入的数据符合预设的规则，从而提高用户体验并减少服务器端的压力。`jquery-checkform` 提供...
JavaScript 完成注册页面表单校验的实例
10-19
2. **绑定校验函数**: `checkForm()`是我们的校验函数，它将在表单提交时被调用。为了阻止非法数据的提交，我们需要在函数中返回`false`。 3. **获取用户输入**: 使用`document.getElementById`获取表单元素的值，...
未结束的字符串常量
fjun0910的专栏
01-10 836
<br />消息: 未结束的字符串常量<br />行: 132801774<br />字符: 206<br />代码: 0<br />URI: http://127.0.0.1:8080/ly/<br />原因：在JSP中 <br /><script type="text/javascript"> <br />   var _obj=new ResObj('${item.name}',${item.introduction},'${item.address}');<br />.......<br />这里的
CKEditor详细配置
fjun0910的专栏
01-10 588
<br />CKEditor是一个文本编辑器是内部的网页使用。这是一个所见即所得的编辑器，这意味着上的案文是编辑看起来尽可能的用户提供类似的结果时发表。它带来了网络上常见的编辑功能，如微软Word和OpenOffice桌面编辑应用程序中。由于CKEditor正在灵活的开放源代码和商业授权协议，您就可以使用内部集成和任何类型的应用程序了。这是理想的编辑器的开发，制造，提供方便和强大的解决方案，以他们的用户。<br />CKEditor与WordCKEditor不是像微软的Word或OpenOffice桌面应用
浏览器弹出新窗口
fjun0910的专栏
01-10 586
<br />问题： JS中弹出新窗口,  window.open("url","windowname","features");同一个页面的内容不重复弹出窗口？<br />     答案： window.open 第二个参数,只要windowname相同，且唯一，就会在同一个窗口打开。<br />         注意：window.open 第二个参数的名字是不能带空格<br />                              .特殊值：_blank,打开新的窗口<br />         
js中url乱码
fjun0910的专栏
01-10 435
乱码有很多情况，我的如下解决即可。在scirpt标签上添加charset="utf-8" 属性<br /><br /><script type="text/javascript" src="js/query.js" charset="utf-8"></script>    var sname="衢州第一中学";<br /><br />  <a href="http://www.baidu.com/s?wd=" + sname+" target="_blank" >"
使用Ajax实现Test_Shop_SSM项目注册功能的表单验证
首先是修改form表单的提交，通过checkForm()方法的返回值判断是否提交，使用onsubmit参数实现表单提交的控制。具体而言，当onsubmit参数设置为“true”时，允许表单提交，而当参数设置为“false”时，不允许表单提交...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值