大家好，又见面了，我是你们的朋友全栈君。
前言
在BS模式的项目中，客户中验证是否为空，是否为数字时，都是通过代码进行一系列的判断来实现的。后来接触到asp.net中的验证控件，瞬间觉得又提升了一个档次，我们可以通过控件来进行相应的验证。但是在html界面上却没有验证控件，引入了easyui后，也有了相应的解决办法，就是我们今天要介绍的easyui表单验证。
用法
1.从标记创建验证框
<input id="name" class="easyui-validatebox" data-options="required:true">2.用JavaScript创建验证框
<input id="name"> //添加输入框//对输入的文本进行验证
$('#name').validatebox({
required: true
});常用属性
|
名称 |
类型 |
描述 |
默认值 |
|
required |
boolean |
定义是否字段应被输入。 |
false |
|
validType |
string,array |
定义字段的验证类型，比如 email、url，等等。可能的值： |
null |
|
missingMessage |
string |
当文本框为空时出现的提示文本。 |
200 |
|
invalidMessage |
string |
当文本框的内容无效时出现的提示文本。 |
该字段是必需的。 |
|
novalidate |
boolean |
当设置为 true 时，则禁用验证。 |
null |
常用方法
|
名称 |
参数 |
描述 |
|
destroy |
none |
移除并销毁该组件。 |
|
validate |
none |
进行验证以判定文本框的内容是否有效。 |
|
isValid |
none |
调用 validate 方法并且返回验证结果，true 或者 false。 |
|
enableValidation |
none |
启用验证。该方法自版本 1.3.4 起可用。 |
|
disableValidation |
none |
禁用验证。该方法自版本 1.3.4 起可用。 |
验证规则
验证规则通过validType来实现，有一些easyui已经封装好的规则：
1.email:匹配email正则表达式规则。
2.url:匹配URL正则表达式规则。
3.length[0,100]:允许输入0到100个字符。
除了以上可以直接拿来用的验证规则，我们也可以自定义想要的验证规则，比如我们常用的一些规则：
首先自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
//移动手机号码验证
Mobile: {//value值为文本框中的值
validator: function (value) {
var reg = /^1[3|4|5|8|9]\d{9}$/;
return reg.test(value);
},
message: '请输入正确的手机号'
},
//数字验证
Number:{
validator: function (value) {
var reg = /^[+]?[1-9]+\d*$/i;
return reg.test(value);
},
message: '请输入数字'
},
});定义输入框与验证规则交互
1.必填项验证
<input id="StudentName" class="easyui-validatebox" type="text" data-options="required:true" >效果图：
2.手机号验证
<input id="StudentCellphone" class="easyui-validatebox" type="text" data-options="validType:'Mobile'">效果图：
3.数字验证
<input id="StudentCode" class="easyui-validatebox" type="text" data-options="validType:'Number'">效果图：
4.字符长度验证
<input id="StudentName" class="easyui-validatebox" type="text" data-options="validType:'length[1,4]'">效果图：
总结
总体来说，easyui简单，易学，也非常好用，相比asp.net的验证控件和我们手动编写的一些验证规则来说，easyui的表单可以实时验证，增强了用户体验，还是不错的。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/105723.html原文链接：https://javaforall.net
