easyui验证需要哪个css文件夹,jQuery EasyUI之验证框validatebox实例详解

1.样式

e02535931423af39f3e8dd6ad1d96844.png

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

2.练习1:验证输入字符长度及非空

validatebox

姓名:

$("#validateboxID").validatebox({

required:true,

validType:['length[1,6]','zhongwen']

});

结果:

625e526d99f05046d79ac21ce4e171c5.png

742616eb9a561c1b234730924a03038f.png

3.练习2:自定义规则作为输入框验证规则

validatebox

姓名:

$("#validateboxID").validatebox({

required:true,

validType:['length[1,6]','zhongwen']

});

$.extend($.fn.validatebox.defaults.rules,{

zhongwen:{

validator:function(value){

//如果符合中文

if(/^[\u3220-\uFA29]*$/.test(value)){

return true;

}

},

//如果不符合中文,以下就是提示信息

message:'姓名必须全为中文'

}

});

结果:

79d17f28f3a2bb07d5b96b268b6503da.png

c5af2353b0fd1bf3de22b2d31ccb1c77.png

4.练习3:验证邮箱

validatebox

邮箱:

$("#emailID").validatebox({

required:true,

validType:['length[1,30]','email']

});

结果:

f1e743dbcc7a0a5cd812f75b5c44bcd4.png

2680a5166dffcbfd28ffd28a093fb8b4.png

5.文档

13d9d1f72c55f71298ee275f954e249d.png

e911bf1168fc6523f2465f97c8399b96.png

bc89514a7ee5e8c3d06e69e1f4f3b1b4.png

a67a80d0bd678140b952473440ab05c7.png

以上所述是小编给大家介绍的jQuery EasyUI之验证框validatebox实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值