Easyui中Validatebox控件和正则表达式
程序员文章站
2024-02-04 21:19:22
...
简介：
jQuery EasyUI 的Validatebox控件提供了强大的验证功能，让客户端表单验证变得简单，比如Email、url等，使我们在输入时保证数据的完整性和正确性。
实例：
<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
required:true,
validType:['email','length[0,20]']
">做法：
新建一个js文件，对easyui提供的jquery.validatebox.js进行扩展。例如称为validate.js
文件的内容：
//扩展easyui表单的验证
$.extend($.fn.validatebox.defaults.rules, {
//验证汉字
CHS: {
validator: function (value) {
return /^[\u0391-\uFFE5]+$/.test(value);
},
message: 'The input Chinese characters only.'
},
//移动手机号码验证
Mobile: {//value值为文本框中的值
validator: function (value) {
var reg = /^1[3|4|5|8|9]\d{9}$/;
return reg.test(value);
},
message: 'Please enter your mobile phone number correct.'
},
//国内邮编验证
ZipCode: {
validator: function (value) {
var reg = /^[0-9]\d{5}$/;
return reg.test(value);
},
message: 'The zip code must be 6 digits and 0 began.'
},
//数字
Number: {
validator: function (value) {
var reg =/^[0-9]*$/;
return reg.test(value);
},
message: 'Please input number.'
},
//非负整数
Integer: {
validator: function (value) {
var reg = /^[1-9]\d*|0$/;
return reg.test(value);
},
message: '请输入非负整数'
},
}) 页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Basic ValidateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script src="validatebox.js" type="text/javascript"></script> <!--引入刚创建的js文件-->
</head>
<body>
<h2>常用验证格式</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
<table cellpadding="10">
<tr>
<td>User Name:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input class="easyui-datebox textbox"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'"></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'"></td>
</tr>
<tr>
<td>Length:</td>
<td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'"></td>
</tr>
<tr>
<td>Chinese:</td>
<td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'"></td>
</tr>
<tr>
<td>ZipCode:</td>
<td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'"></td>
</tr>
</table>
</div>
<style scoped="scoped">
.textbox{
height:20px;
margin:0;
padding:0 2px;
box-sizing:content-box;
}
</style> 效果：
总结：
这样你想要什么样的验证都可以有了，希望有所帮助！