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