用javascript实现简单的用户登录验证

伟大人 發表於 2019-9-7 23:44:00

用javascript实现简单的用户登录验证

简单清晰明了版本
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
 function check() {
 if(document.getElementById("username").value=="") {
 alert("没有输入用户名！");
 return false;
 } else if(document.getElementById("password").value=="") {
 alert("没有输入密码！");
 return false;
 } else {
 alert("提交成功！")
 return true;
 }
 }
</script>
<form name="form1">
<input type="text" id="username">
<input type="password" id="password" >
<input type="submit" onclick="check()">
</form>
</body>
</html></pre>
</div>
 
 
以下是牛客网鲁鲁写的代码，很好，向他学习
<div class="cnblogs_code">
<pre>链接：https://www.nowcoder.com/questionTerminal/f904c482f21346a6a19efd5a82655518
来源：牛客网

var getCheckObject = function() {
 var tipP = tip = document.createElement("p");
 tip.appendChild(document.createTextNode("密码错误"));
 var tipU = tip = document.createElement("p");
 tip.appendChild(document.createTextNode("用户名错误"));

 function addErrorTip(node, type) {
 node.className +=' ' + 'error' +' ';
 if(type =="username") {
 node.parentNode.appendChild(tipU);
 } else if (type == "password") {
 node.parentNode.appendChild(tipP);
 }

 }

 function removeErrorTip(node, type) {
 node.className = "";
 if(type ==="username") {
 node.parentNode.removeChild(tipU);
 } else if (type === "password") {
 node.parentNode.removeChild(tipP);
 }
 }

 function isValidName(name) {
 return false;
 }

 function isValidPassword(password) {
 var lenIsEnough = password.length > 6; //密码长度大于6
 var hasDigital = /{d}+/.test(password); //密码包含数字
 var hasCharater = /{w}+/.test(password); //密码包含其它字符
 return lenIsEnough && hasDigital && hasCharater;
 }
 return {
 addErrorTip: addErrorTip,
 removeErrorTip: removeErrorTip,
 isValidName: isValidName,
 isValidPassword: isValidPassword
 };
};

var checkObj = getCheckObject();
var form = document.forms['login-form'];
var username = form['username'];//--name是关键字
var password = form['password'];
form.addEventListener('submit', function(event){
 if(!checkObj.isValidName(username.value)) {
 checkObj.addErrorTip(username,'username');
 event.preventDefault();
 }
 if(!checkObj.isValidPassword(password.value)) {
 checkObj.addErrorTip(password,'password');
 event.preventDefault();
 }
}, false);

form.addEventListener('reset',function(event){
 checkObj.removeErrorTip(username,'username');
 checkObj.removeErrorTip(password,'password');
},false);

username.addEventListener('blur', function(event) {
 if (!checkObj.isValidName(username.value)) {
 checkObj.addErrorTip(username, 'username');
 }
}, false)
username.addEventListener('focus', function(event) {
 checkObj.removeErrorTip(username, 'username');
}, false);
password.addEventListener('blur', function(event) {
 if (!checkObj.isValidPassword(password.value)) {
 checkObj.addErrorTip(password, 'password');
 }
}, false)
password.addEventListener('focus', function(event) {
 checkObj.removeErrorTip(password, 'password');
}, false);</pre>
</div>
  
来源：https://www.cnblogs.com/SallyShan/p/11483952.html

頁: [1]

琼殿技术论坛's Archiver

用javascript实现简单的用户登录验证