作一個簡單的表單驗證

時間 2019-11-12

標籤一個簡單表單驗證欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">javascript

</style>
</head>
<body>
<form action="" method="get">
登陸帳號*:
<input type="text" name="" id="iptId" placeholder="限小寫字母或數字組合" />
<span></span><br /><br />
你的暱稱*:
<input type="text" name="" id="iptNickName" placeholder="中英文皆可" />
<span></span><br /><br />
email*:
<input type="text" name="" id="iptEmail" placeholder="請輸入你的郵箱" />
<span></span><br /><br />
設置密碼*:
<input type="text" name="" id="iptPass1" placeholder="請設置你的密碼" />
<span></span><br /><br />
確認密碼*:
<input type="text" name="" id="iptPass2" placeholder="請確認你的密碼" />
<span></span><br /><br />
<button type="button" id="btn">密碼強度</button><br /><br />
<input type="submit" value="註冊" id="subIpt" />
</form>
<script type="text/javascript">
let iptId = document.querySelector('#iptId');
//let iptNickName = document.querySelector('#iptNickName');
let iptEmail = document.querySelector('#iptEmail');
let iptPass1 = document.querySelector('#iptPass1');
let iptPass2 = document.querySelector('#iptPass2');
let btn = document.querySelector('#btn');
let subIpt = document.querySelector('#subIpt');
let id = 0;
let email = 0;
let pass1 = 0;
let pass2 = 0;
let nickName = 1;css

allRight()html

iptId.oninput = function() {
let reg = /^[a-z0-9]+$/;
let res = reg.test(this.value);
//console.log(res)
if (res) {
iptId.nextElementSibling.innerHTML = '√';
//console.log(res)
id = 1;
} else {
id = 0;
iptId.nextElementSibling.innerHTML = '錯';java

}
allRight()
}
iptNickName.oninput = function() {
let reg = /^[a-zA-Z\u2E80-\u9FFF]*$/;
let res = reg.test(this.value);
if (res) {
iptNickName.nextElementSibling.innerHTML = '√';
nickName = 1;
subIpt.disabled = false
} else {
iptNickName.nextElementSibling.innerHTML = '錯誤';
subIpt.disabled = true;
nickName = 0;
}
allRight();
}
iptEmail.oninput = function() {
let reg = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/;
let res = reg.test(this.value);
if (res) {
iptEmail.nextElementSibling.innerHTML = '√';
email = 1;
} else {
iptEmail.nextElementSibling.innerHTML = '錯誤'
email = 0;
}
allRight()this

}
iptPass1.oninput = function(){

let reg = /[0-9]/
let reg1 =/[a-zA-Z]/
let reg2 =/[\W]/
let reg3 =/[\u2E80-\u9FFF]/
let res = reg.test(this.value)
let res1 = reg1.test(this.value)
let res2 = reg2.test(this.value)
let res3 = reg3.test(this.value)
let sum = res+res1+res2
//console.log(res)
//console.log(res,res1,res2)
console.log(res + res1 +res2)
if(res3){
iptPass1.nextElementSibling.innerHTML = '錯誤'
pass1 = 0;
}else{
pass1 = 1;
if(sum>0){
iptPass1.nextElementSibling.innerHTML = '√';
if(sum == 1){
btn.innerHTML = '低'
}
if(sum == 2){
btn.innerHTML = '中'
}
if(sum == 3){
btn.innerHTML = '高'
}
}

}
allRight()
}
iptPass2.oninput=function(){
if(iptPass1.value == iptPass2.value){
iptPass2.nextElementSibling.innerHTML = '√'
pass2 = 1
}else{
iptPass2.nextElementSibling.innerHTML = '兩次密碼不同'
pass2 = 0
}
allRight()
}

spa

function allRight() {
if (id + nickName + email + pass1 +pass2 == 5) {
subIpt.disabled = false;
} else {
subIpt.disabled = true;orm

}
}
</script>htm

</body>
</html>ip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。