第一篇，js表單驗證模板
阿新 • • 發佈：2017-05-16
scrip put func wrong lur ctype lan lang 執行
下面是對於一個email的表單驗證的基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
border: 1px solid black;
font-weight: bold;
}
.right{
border: 1px solid green;
font-weight: bold;
}
.wrong{
border: 1px solid red;
font-weight: bold;
}
</style>
<title>這是一個表單驗證的模板！！！</title>
</head>
<body>
<form id="myform" action="show.html" method="post" onsubmit="return validate()"> //這個onsubmit是對於整個form表單而言的，由button的submit類型觸發
請輸入email地址：
<input type="text" id="email" name="email" class="init" onblur="validateEmail()">
<span id="msg"></span><br>
<button type="submit">提交驗證</button>
</form>
<script type="text/javascript">
function validateEmail() { /*定義事件處理函數，合法性*/
var email=document.getElementById(‘email‘);
var msg=document.getElementById(‘msg‘);
if(/^\w+@\w+\.\w+$/.test(email.value)){ //利用正則表達式判斷 根據判斷結果執行相應樣式以提示用戶
email.className="right";
msg.innerHTML="格式正確";
msg.style.color="green";
return true; //return用來作為處理函數的返回值，是為了提供給onsumit執行的函數判斷，是否可以提交
}else{
email.className="wrong";
msg.innerHTML="格式錯誤";
msg.style.color="red";
return false;
}
}
function validate() {
return validateEmail();
}
</script>
</body>
</html>
、、、、、、、、、、、、、、、、、、、、、密碼驗證、、、、、、、、、、、、、、、、、、、、、、、、、、、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
border: 1px solid black;
font-weight: bold;
}
.right{
border: 1px solid green;
font-weight: bold;
}
.wrong{
border: 1px solid red;
font-weight: bold;
}
</style>
<title>這是一個表單驗證的模板！！！</title>
</head>
<body>
輸入密碼：<input type="password" id="psd" name="psd" onblur="validateEmpty(‘psd‘)">
<span id="psdmsg"></span><br>
確認密碼：<input type="password" id="conf" name="conf" onblur="validateconf(‘psd‘,‘conf‘)">
<span id="confmsg"></span><br>
<script type="text/javascript">
function validateEmpty(srcname) { /*定義事件處理函數，合法性*/
var psd=document.getElementById(srcname);
var msg=document.getElementById(srcname+‘msg‘);
if(psd.value===""){
psd.className="wrong";
msg.innerHTML="密碼不能為空";
msg.style.color="red";
return false;
}else{
psd.className="right";
msg.innerHTML="";
msg.style.color="green";
return true;
}
}
function validateconf(srcname,desname) {
var psd=document.getElementById(srcname);
var conf=document.getElementById(desname);
var msg=document.getElementById(desname+‘msg‘);
if(conf.value===psd.value){
psd.className="right";
conf.className="right";
msg.innerHTML="輸入內容一致"
msg.style.color="green";
return true;
}else{
psd.className="wrong";
conf.className="wrong";
msg.innerHTML="輸入內容不一致"
msg.style.color="red";
return false;
}
}
function validate() {
return validateEmail();
}
</script>
</body>
</html>
第一篇，js表單驗證模板