jQuery EasyUI 表单 - 表单验证插件validatebox

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


     
     还需要引入三个外部js库

  //这是中文简体语言包

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

validate表单验证

需要引入两个外部js库

validate表单验证实例

1   2   3   4     
        5     验证框架的使用  6   7      12  13  14 
      
        15     用户名：
         
       
 16     密码：
         
       
 17     确认密码：
         
       
 18     邮箱：
         
       
 19     手机号：
         
       
 20     性别：
       男 21         
       女
       
 22     是否同意协议
       
       
 23    
        24 
      
 25  26  27 
       28  29  30 102 103 104 105 106 107

View Code

$(function () {
  $("#name").validatebox({
  required:true, validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'], missingMessage:"请输入用户名" }) $("#phone").validatebox({
  required:true, validType:['userTel'], missingMessage:"请输入电话号码" }) $("#userPwd").validatebox({
  required:true, validType:['minlength[6]','maxlength[16]'], missingMessage:"请输入密码" }) $("#userePwd").validatebox({
  required:true, validType:['minlength[6]','maxlength[16]','checkPass','equalTo["#userPwd"]'], missingMessage:"请再次输入密码" }) //自定义验证规则 $.extend($.fn.validatebox.defaults.rules,{
  //验证用户名的格式 checkUser:{
  validator:function (value, param) {
  return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)         }, message:"6~18个字符，可使用字母、数字、下划线，需以字母开头" }, //验证用户名的长度 minlengthUser:{
  validator:function(value,param){
  return value.length>=param[0];         }, message:"用户名长度至少为{0}位" }, maxlengthUser:{
  validator:function(value,param){
  return value.length
    
     =param[0];       }, message:"密码长度至少为{0}位" }, //验证密码最大长度 maxlength:{
  validator:function(value,param){
  return value.length