zoukankan      html  css  js  c++  java
  • js面向对象加构造函数模式表单验证

    <!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>

  • 相关阅读:
    IDEA-各模块间引用出现问题的解决方法
    【MyBatis学习06】_parameter:解决There is no getter for property named in class java.lang.String
    《转载》JVM垃圾回收机制
    java面试复习题四
    Java中excel转换为jpg/png图片 采用aspose-cells-18.6.jar
    POI导出复杂的excel;excel公共样式类;excel拼接定制类;数据科学计数法转为普通值
    java发送邮件无法显示图片 图裂 的解决办法
    pom.xml文件最详细的讲解
    Tomcat启动报Error listenerStart错误 Context [] startup failed due to previous errors
    ora-01031:insufficient privileges解决方法
  • 原文地址:https://www.cnblogs.com/xts6/p/11312279.html
Copyright © 2011-2022 走看看