jQuery-easyui和validate表单验证实例

使用时需要向页面引入两个css文件如下:

<link rel="stylesheet" href="css/icon.css">
<link rel="stylesheet" href="css/easyui.css">
还需要引入三个外部js库

<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
//这是中文简体语言包
<script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>

validatebox表单验证实例

 1 $(function () {
 2     $("#name").validatebox({
 3         required:true,
 4         validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
 5         missingMessage:"请输入用户名"
 6 
 7     })
 8   
 9     //自定义验证规则
10 $.extend($.fn.validatebox.defaults.rules,{
11 
12     //验证用户名的格式
13     checkUser:{
14         validator:function (value, param) {
15             return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
16         },
17         message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
18     },
19 
20 })
21     //easyui表单提交的控制
22     $('#loginForm').form({
23 
24         onSubmit:function(){
25             return $(this).form('validate');
26         },
27         success:function(){
28             $.messager.alert('Info', "恭喜您,注册成功!");
29         }
30     });
31 })

View Code