码迷,mamicode.com
首页 > Web开发 > 详细

js面向对象加构造函数模式表单验证

时间:2019-08-06 22:49:03      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:win   表单验证   min   user   als   alert   var   utf-8   value   

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <div>
    <input type="text" id="userName" value="6">
    <input type="password" id="password">
    <button id="button">提交</button>
  </div>
  <script>
    var m={
      userName:$("#userName").val(),
      password:$("#password").val(),
      userTest:/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/,
      passwordTest:/^(\w){6,20}$/,//6-20个字母
      test:function(testDate, testReg,testName){
        this.testDate = testDate;
        this.testReg = testReg;
        this.testName = testName;
        this.testFormData=function(){
          if(this.testDate==‘‘){
            alert(this.testName+‘不能为空,请输入‘)
            return false;
          }else if(!this.testReg.test(this.testDate)){
            alert(testName+‘格式不正确,请重新输入‘)
            return false;
          }else{
            return true;
          }
        }
      },
        page:function(){
                      alert(‘登录成功,欢迎来到百度‘)
         window.location=‘https://www.baidu.com‘
      },
          commit:function(){
        this.userName=$("#userName").val();
        this.password=$("#password").val();
        var test=this.test;
        var userNameTest=new test(this.userName,this.userTest,‘用户名‘);
        var passwordTest=new test(this.password,this.passwordTest,‘密码‘);
        var userNameV=userNameTest.testFormData()
        console.log(userNameV)
        if(!userNameV){//如果用户名不规范 就直接退出运行 不进行密码验证
          return;
        }else{
          var passwordV=passwordTest.testFormData()
        }
        if(userNameV&&passwordV){
          this.page();
        }
     }
}

$(‘#button‘).click(function(){
  m.commit()
})
</script>
</body>
</html>

js面向对象加构造函数模式表单验证

标签:win   表单验证   min   user   als   alert   var   utf-8   value   

原文地址:https://www.cnblogs.com/xts6/p/11312279.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!