使用jquery的验证框架，对表单进行验证(简单、基础)

最新推荐文章于 2023-03-17 19:20:30 发布

duoduo220

最新推荐文章于 2023-03-17 19:20:30 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 框架 input email function stylesheet

本文链接：https://blog.youkuaiyun.com/wo1354691371/article/details/7413396

jquery 专栏收录该内容

13 篇文章

订阅专栏

该博客介绍了如何使用jQuery的验证插件jQuery Validate来实现简单的表单验证，包括自定义验证方法，如身份证号验证，同时展示了完整示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表单验证</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

$().ready(function (){

//自行定义的验证方法
jQuery.validator.addMethod("cardValidate",function(value, element, param) {
  //获取用户输入的值，判断是否为空
   if(value==""){
     return false;
   }

  return true;
     }
);

//自行定义的验证方法
jQuery.validator.addMethod("cardLength",function(value, element, param) {
  //获取用户输入的值，长度是否等于15或者是18

   if(value.length!=15&&value.length!=18){

     return false;
   }

     return true;
     }
);

   $("#form1").validate({
    rules:{
    realname:{
      required:true,

    },
   username:{
      required:true,
      rangelength:[5,8]
    },
    password:{
      required:true,
      rangelength:[6,12]

    },
    repassword:{
      required:true,
      rangelength:[6,12],
      equalTo:"#pass"

    },
    sex:{
      required:true,

    },
    age:{
      required:true,
      range:[25,50]

    },
    birthday:{
      required:true,
      dateISO:true
    },
   degree:{
      required:true

    },
   box:{
      required:true

    },
      email:{
      required:true,
      email:true
    },
    card:{
      cardValidate:true,
      cardLength:15
    }

    },
    messages:{

     realname:{
     required:"真实姓名不能为空！"

   },
  username:{
     required:"登录名不能为空！",
     rangelength:"用户名长度应该在5到8位之间"
   },
   password:{
     required:"密码不能为空！",
     rangelength:"输入的必须在6~12之间，不能有汉字哦"
   },
   repassword:{
     required:"密码不能为空！",
     rangelength:"输入的必须在6~12之间，不能有汉字哦",
     equalTo:"密码和重复密码内容不一致"

   },
   sex:{
      required:"必须选一个"

    },
   age:{
      required:"不能为空 ",
      range:"输入的必须是25-50之间"

    },
   birthday:{
      required:"不能为空",
      dateISO:"必须输入正确的格式"
    },
   degree:{
      required:"不能为空"

    },
   box:{
      required:"必须选一个"

    },
      email:{
      required:"不能为空",
      email:"请输入邮箱的正确格式"
    },
   card:{
     cardValidate:"身份证号不能为空！",
     cardLength:"身份证号长度不够"
   }


      }


});

});

</script>
</head>

真实姓名：<input type="text" name="realname" id="realname" /><br>
登录名：<input type="text" name="username" id="uname" /><br>
密码：<input type="password" name="password" id="pass" /><br>
重复密码：<input type="password" name="repassword" id="repass" /><br>
性别:<input type="radio" name="sex" id="nan" />男<input type="radio" name="sex" id="nv" />女<br>
年龄：<input type="text" name="age" id="age" /><br>
出生日期：<input type="text" name="birthday" id="birthday" /><br>
学历：<select name="degree">
    <option value="">--请选择--</option>
    <option value="大学">大学</option>
    <option value="大专">大专</option>
    <option value="高中">高中</option>
    <option value="中专">中专</option>

</select> <br>
电子邮箱：<input type="text" name="email" id="email" /><br>
兴趣爱好：<input type="checkbox" name="box" />篮球
<input type="checkbox" name="box" />足球
<input type="checkbox" name="box" />音乐
<input type="checkbox" name="box" />唱歌<br>
身份证号：<input type="text" name="card" id="card" /><br>
<input type="submit" value="提交" />

</form>
</body>
</html>