jQuery easyui的validatebox复选框规则扩展和easyui复选框validatebox用法

先分享一下数据验证展示效果。

Web前端数据验证组件。

Web项目中客户端和服务器端的交互离不开表单。表单中最常用的元素是输入标签。文本框必须首先用于输入标记！

输入文本框允许用户随意输入，难免有些用户会输入一些不符合规定的数据。此时，有必要在提交前核实数据。如果数据提交到服务器后进行验证，用户体验会大大降低。

前端验证中有很多现成的组件，其中EasyUI的validatebox插件使用方便，提示界面也相当友好，但是validatebox提供的验证规则默认是有限制的，有时候我们需要添加自己的验证规则。

规则： { email : { validator :函数(值){ return.$/i.test(值)；}，消息：“请输入有效的电子邮件地址。”}，url: { validator:函数(值){ return.$/i.test(值)；}，消息：“请输入有效的网址。”}，length: { validator:函数(value，param){ var len=$。微调(值)。长度；返回len=param[0] len=param[1] }，消息：“请输入一个介于{0}和{1}之间的值。”}，remote: { validator:函数(value，param){ var data={ }；数据[参数[1]]=值；var响应=$。ajax({ url:param[0]，dataType:'json '，data:data，async:false，cache:false，type:'post' })。responseText返回响应==' true}，消息：“请修复此字段。”}}自定义检查规则。

最好不要在易用户的源文件中添加新的检查规则。首先是避免了因为误操作而污染易Ui的源代码，更重要的是以后很容易升级组件。所以最合理的方法就是单独编写自己的扩展文件。

例如，我在原有规则的基础上增加了以下三个验证：单独的文件easyui-extend-rcm.js:

(函数($){/* * * jQuery easui 1.4-函数扩展* *版权所有(c) RCM 2009-2015 * *添加了validatebox复选框规则* */$。扩展($。fn。Validate Box.defaults.rules，{ idcard : { validator : function(value，param){ return idcardnoutil . checkidcardno(value)；}，message: '请输入正确的ID号' }，checknum : { validator : function(value，param) {return/([0-9]) $/。测试(值)；}，message: '请输入一个整数' }，checkfloat: {validator :函数(value，param) {return/[|-]？([0-9] \.[0-9] )|[0-9] $/.测试(值)；}，message: '请输入合法号码' } })；})(jQuery)；自定义规则的使用方式。

除了EasyUI文件之外，还应该在头部引入自己的扩展名文件，其顺序在EasyUI文件之后：

pre name=' code ' class=' JavaScript ' span style=' font-size :18 px；脚本src=' http : # WEBSROOT()/static/jseas ui/jquery . eas ui . min . js ' type=' text/JavaScript '/脚本脚本src=' http : # WEBSROOT()/static/js/comm/Easi-extend-RCM . js ' type=' text/JavaScript '/script/span，然后用Html引用如下，一定要添加两个属性：Class和data-options:

pre name=' code ' class=' html ' span style=' font-size :18 px；div id=' DLG ' class=' measuri-dialog ' style=' width :300 px；高度：300 px垂直对齐： 中间；closed='true' title='添加中药button=' # DLG-buttons ' div id=' editForm ' style=' background : '；padding:20px宽度宽度：200像素高度：200 pxdisplay:noneform id='form '方法=' post ' div style=' padding-left :16 px；衬垫-顶部：20像素；隐藏='真'输入类型=“文本”名称=' DLG _药品id ' id=' DLG _药品id ' hidden=' true '/div div style=' padding-top :10 px；左填充left:40px='dlg_name '的标签药物：/标签输入类型=' text ' name=' DLG _ name ' id=' DLG _ name ' class=' easui-validate box ' readonly=' readonly '/div/div style=' padding-top 336010 px；左填充left:40px='dlg_price '的标签单价：/标签输入类型=' text ' name=' DLG _普莱斯' id=' DLG _普莱斯' span style=' color : # ff 0000class=' measuri-validate box ' data-options=' required d : true，valid type : ' checkFloat ' '/span//div div style=' padding-top :10 px；左填充left :40 px=' DLG _ purchase _ price '的标签进价：/标签输入类型=' text ' name=' DLG _ purchase _ price ' id=' DLG _ purchase _ price ' span style=' color : # ff 0000；class=' measuri-validate box ' data-options=' validate type : ' CheckFloat ' '/span//div div style=' padding-top :10 px；左填充left:40px='dlg_stock '的标签库存：/标签输入类型=' text ' name=' DLG _ stock ' id=' DLG _ stock ' span style=' color : # ff 0000；class=' measuri-validate box ' data-options=' validate type : ' CheckNum ' '/span//div div style=' padding-top :10 px；左填充left:40pxalign='center '输入类型='按钮'值='保存onclick=' savetcmdrug public mapped()' class=' Bt _ style '/div/form/div/div/span详解jQuery easyui校验框validatebox用法

JQuery易用户界面验证框（验证框)在表单的验证方面给我们提供了很方便的方法

输入id='vv '必需='true '有效类型='电子邮件'属性

属性名类型描述默认值需要布尔定义文本域是否为必填项假有效类型字符串定义字段的验证类型比如电子邮件、网址等。空缺失消息字符串当文本框为空时提示的文本信息无效消息中需要此字段字符串当文本框内容不合法时提示的文本信息空方法

方法名参数描述不毁灭任何人删除并且销毁组件无验证做验证以确定文本框的内容是否是有效的无效无调用验证方法并返回验证结果，真的或者错误的注意这里除了需要属性外，若validType属性失败。并不会阻止表单提交.所以我们这里如果要阻止表单提交，就又要利用jquery用户界面提交的表单方法

具体写法是

$(':submit ').单击(function(){if(！$(“# form”).form(' validate '){ return false；} })#表单是形式表单的身份