EasyUI - ValidateBox 验证组件

基本效果:

效果:

EasyUI - ValidateBox 验证组件

EasyUI - ValidateBox 验证组件

Html代码:

        <input id="email" />

JS代码:  

默认的有四种验证方式:

  1. email:验证邮箱
  2. url:验证url
  3. length:验证输入长度
  4. remote:Ajax后台验证,具体参数见注释。
$(function () {
$('#email').validatebox({
required: true,//必填项 // * 默认的是四种,可以自己写方法 *
validType: 'email',//验证邮箱
//validType:'length[5,10]',//验证长度
//validType:'url',//验证url地址
//validType: 'remote["../Json/ValidateBox.ashx", "param"]',//使用Ajax进行后台验证,返回boolean值,第一个参数是url地址,第二个参数是使用的参数名称,在后台接收。 //missingMessage: '请填写信息!',//鼠标经过,但未填写信息时显示的信息。
//invalidMessage: '请输入正确的Email地址!',//当输入错误信息时,显示的信息
tipPosition: 'right',//显示错误信息的方框,显示的位置
delay: ,//显示提示框的时间
})
})

可以不局限于给定的四种验证方式,也可以自定义验证方法。

*自定义方法:验证输入的长度*

效果:

只是其中一个效果截图:

EasyUI - ValidateBox 验证组件

EasyUI - ValidateBox 验证组件

html效果:

        <input id="email" />

JS代码:

$(function () {

    // * 自己写另外一种验证 *
$.extend($.fn.validatebox.defaults.rules, {
// * 此方法判断文本框中的值不小于多少位 *
minLength: {
validator: function (value, param) {
return value.length >= param[];//参数pram[0]相当于 minlength[2,10]中的第一个数,2
},
message: '请输入不小于{0}的值!',//此时的{0}代表的就是param[0]得值。
},
}) $('#email').validatebox({
required: true,//必填项
validType: 'minLength[2]',
})
})

*自定义方法:两个文本框中的值是否相同*

效果:

EasyUI - ValidateBox 验证组件

EasyUI - ValidateBox 验证组件

html代码:

        <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validtype="equals['#pwd']" />

JS代码:

$(function () {

    // * 自己写另外一种验证 *
$.extend($.fn.validatebox.defaults.rules, { // * 此方法验证两个文本框中的值是否相同 *
equals: {
validator: function (value, param) {
return value == $(param[]).val();
},
message: '两次输入的值不相同!'
},
})
})
上一篇:大数据学习day22------spark05------1. 学科最受欢迎老师解法补充 2. 自定义排序 3. spark任务执行过程 4. SparkTask的分类 5. Task的序列化 6. Task的多线程问题


下一篇:openNebula 模板实例化成虚拟机【参数名为VM_NAME】