JavaScript 表單驗證學習筆記
- PHPz原創
- 2017-04-04 14:11:391255瀏覽
JavaScript 表單驗證
JavaScript 可用於在資料被送到伺服器前對 HTML 表單中的這些輸入資料進行驗證。
表單資料經常需要使用 JavaScript 來驗證其正確性：
驗證表單資料是否為空？
驗證輸入是否是一個正確的email位址？
驗證日期是否輸入正確？
驗證表單輸入內容是否為數字型？
必填（或必填）項目
下面的函數用來檢查使用者是否已填入表單中的必填（或必填）項目。假如必填或必選項為空，那麼警告框會彈出，並且函數的回傳值為 false，否則函數的回傳值則為true（表示資料沒有問題） ：
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{ alert("姓必须填写");
return false;
}}
E-mail 驗證
下面的函數檢查輸入的資料是否符合電子郵件地址的基本語法。
意思是說，輸入的資料必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，並且@ 之後需有至少一個點號：
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("不是一个有效的 e-mail 地址");
return false;
}
}
今天的練習 寫的不好 沒時間細化 直接貼代碼了
<!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> <p class="p1"> <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>确认密码： </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>手机号： </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> </p> </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="不是一个有效的 e-mail 地址";
}
}
}
function but5() {
var phone=document.getElementById('phone').value;
if (phone=="") {
document.getElementById('worr5').innerHTML="手机号不能为空";
}else{
var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
if (reg.test(phone)) {
alert("号码正确~");
}else{
document.getElementById('worr5').innerHTML="号码有误~";
};
}
}
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;
}
#
以上是JavaScript 表單驗證學習筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn