博客园 首页 私信博主 显示目录 隐藏目录 管理 动画 动画

表单校验

1、form表单验证

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>验证</title>
  </head>
  <body>
   
   
  <form id="myForm" action="success.html" method="post">
  用户名:<input name="userName" placeholder="请输入用户名">
  <button type="button" onclick="doSubmit()">登录</button>
  </form>
   
   
  <!--
  可以跳过验证：
  F12
  之后把type="button" 改成type="submit"
   
  -->
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  function doSubmit(){
  var userName=$("[name='userName']").val();
  if(userName==""){
  alert("用户名不能为空");
  return;
  }
  //表单提交
  $("#myForm").submit();
  }
   
  </script>
   
   
  </body>
  </html>

2、success

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
  <h1>登录成功</h1>
  </body>
  </html>

3、validate验证框架

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>验证框架的使用</title>
   
  <style type="text/css">
  .error{
  color: red;
  }
  </style>
  </head>
  <body>
  <form action="success.html" method="post" id="myForm">
  用户名：<input name="userName"> <br/>
  密码：<input name="password" type="password" id="pwd"> <br/>
  确认密码：<input name="repPassword"type="password" > <br/>
  邮箱：<input name="email"> <br/>
  手机号：<input name="phone"> <br/>
  性别：<input name="sex" type="radio" value="男" checked>男
  <input name="sex" type="radio" value="女">女<br/>
  是否同意协议<input type="checkbox" name="context"><br/>
  <button type="submit">注册</button>
  </form>
   
   
  <!--引入需要的js库-->
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../js/jquery.validate.js"></script>
  <script type="text/javascript">
  $(function(){
  //form表单的验证事件
  $("#myForm").validate({
  //验证规则 需要对哪些元素做验证
  rules:{
  userName:{
  required:true
  },
  password:{
  required:true,
  minlength:6,
  maxlength:10
  },
  repPassword:{
  required:true,
  minlength:6,
  maxlength:10,
  equalTo:"#pwd"
  },
  email:{
  required:true,
  email:true
  },
  phone:{
  required:true,
  checkPhone:true //自己书写的手机验证正则
  },
  context:{
  required:true
  }
  }, //rules end
  //不符合验证规则的错误信息
  messages:{
  userName:{
  required:"请输入用户名"
  },
  password:{
  required:"请输入密码",
  minlength:"密码长度不能少于6位",
  maxlength:"密码长度不能大于10位"
  },
  repPassword:{
  required:"请输入密码",
  minlength:"密码长度不能少于6位",
  maxlength:"密码长度不能大于10位",
  equalTo:"两次密码输入不一致"
  },
  email:{
  required:"请输入邮箱",
  email:"邮箱格式不正确"
  },
  phone:{
  required:"请输入手机号",
  checkPhone:"电话号码格式不正确"//自己书写的手机验证正则
  },
  context:{
  required:"您没有同意协议"
  }
  }, // messages end
  //鼠标失去焦点立即验证
  onfocusout:function(element){
  $(element).valid();
  }
  }); // end validate
   
  //增加了手机验证正则
  jQuery.validator.addMethod("checkPhone",function(value,element){
  var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
  return this.optional(element) || (tel.test(value));
  },"电话号码格式不正确")
   
   
  })
   
   
   
  </script>
   
   
   
   
  </body>
  </html>
posted @ 2017-11-04 19:08  这才是真的阿呆云飞  阅读(666)  评论(0)    收藏  举报