JavaScript 表單驗(yàn)證
<code>JavaScript</code> 可用來在數(shù)據(jù)被送往服務(wù)器前對 <code>HTML</code> 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證佑惠。
表單數(shù)據(jù)經(jīng)常需要使用 JavaScript 來驗(yàn)證其正確性：
驗(yàn)證表單數(shù)據(jù)是否為空母债？
驗(yàn)證輸入是否是一個(gè)正確的<code>email</code>地址惹挟？
驗(yàn)證日期是否輸入正確胃珍？
驗(yàn)證表單輸入內(nèi)容是否為數(shù)字型菌羽？
必填（或必選）項(xiàng)目
下面的函數(shù)用來檢查用戶是否已填寫表單中的必填（或必選）項(xiàng)目。假如必填或必選項(xiàng)為空微王，那么警告框會(huì)彈出蔼夜，并且函數(shù)的返回值為<code> false</code>兼耀，否則函數(shù)的返回值則為 <code>true</code>（意味著數(shù)據(jù)沒有問題）：
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{ alert("姓必須填寫");
return false;
}}
E-mail 驗(yàn)證
下面的函數(shù)檢查輸入的數(shù)據(jù)是否符合電子郵件地址的基本語法。
意思就是說求冷，輸入的數(shù)據(jù)必須包含 @ 符號(hào)和點(diǎn)號(hào)(.)瘤运。同時(shí)，@ 不可以是郵件地址的首字符遵倦，并且 @ 之后需有至少一個(gè)點(diǎn)號(hào)：
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一個(gè)有效的 e-mail 地址");
return false;
}
}
今天的練習(xí) 寫的不好 沒時(shí)間細(xì)化 直接貼代碼了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
<link rel="stylesheet" href="C:\Users\Administrator\Desktop\bootstrap-3.3.5-dist\css\bootstrap.min.css" />
<script type="text/javascript" src="dse.js" ></script>
<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
<!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="div1">
<p class="p0">
<form class="form-horizontal" role="form">
<table >a
<tr>
<td align='right'><label>用戶名： </label></td>
<td ><input type="text" class="form-control" id='user' " /></td>
<td align='right' id="worr1" width="150px"></td>
</tr>
<tr>
<td align='right'><label> 昵稱： </label></td>
<td ><input type="text" class="form-control" id="name"/></td>
<td align='right' id="worr2" ></td>
</tr>
<tr>
<td align='right'><label>密碼： </label></td>
<td ><input type="password" class="form-control" id="pwd1" /></td>
<td align='right' id="worr3"></td>
</tr>
<tr>
<td align='right'><label>確認(rèn)密碼： </label></td>
<td><input type="password" class="form-control" id="pwd2" /></td>
<td align='right' id="worr"></td>
</tr>
<tr>
<td align='right'><label>郵箱： </label></td>
<td > <input type="text" class="form-control" id="email" /></td>
<td align='right' id="worr4" ></td>
</tr>
<tr>
<td align='right'><label>手機(jī)號(hào)： </label></td>
<td ><input type="text" class="form-control" id="phone" /></td>
<td align='right' id="worr5" ></td>
</tr>
<tr>
<td colspan="3"><a href="#" id="a1">用戶手冊</a></td>
</tr>
<tr>
<td colspan="3"><button onclick ="but1()" class="btn btn-default"><label >提交</label></button></td>
<td align='right' id="worr6" ></td>
</tr>
</table>
</form>
</div>
</body>
</html>
js
function but1() {
but2();
but3();
but4();
but5();
but6();
}
function but2() {
var pwd1=document.getElementById('pwd1').value;
var pwd2=document.getElementById('pwd2').value;
if (pwd1=="") {
document.getElementById('worr3').innerHTML="密碼不能為空";
}
if (pwd2=="") {
document.getElementById('worr').innerHTML="密碼不能為空";
}
try{
if (pwd1===pwd2) {
}else{
throw '密碼不一致';
}
}catch(err){
document.getElementById('worr').innerHTML=" "+ err +" ";
// document.getElementById('worr').style.color='red';
}
}
function but3() {
var user=document.getElementById('user').value;
if (user=="") {
document.getElementById('worr1').innerHTML="用戶名不能為空";
}
var name=document.getElementById('name').value;
if (name=="") {
document.getElementById('worr2').innerHTML="昵稱不能為空";
}
}
function but4() {
var email=document.getElementById('email').value;
if (email=="") {
document.getElementById('worr4').innerHTML="郵箱不能為空";
}else{
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
document.getElementById('worr4').innerHTML="不是一個(gè)有效的 e-mail 地址";
}
}
}
function but5() {
var phone=document.getElementById('phone').value;
if (phone=="") {
document.getElementById('worr5').innerHTML="手機(jī)號(hào)不能為空";
}else{
var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
if (reg.test(phone)) {
alert("號(hào)碼正確~");
}else{
document.getElementById('worr5').innerHTML="號(hào)碼有誤~";
};
}
}
function but6() {
var user=document.getElementById('user').value;
var name=document.getElementById('name').value;
var pwd2=document.getElementById('pwd2').value;
var email=document.getElementById('email').value;
var phone=document.getElementById('phone').value;
document.getElementById('worr6').innerHTML=" "+user+" "+name+" "+pwd2+" "+email+" "+phone;
}