JavaScript 常用的表單互動
阿新 • • 發佈：2018-12-17
一、資料規範性檢查
1、應用場合：在判斷輸入的資料是否符合格式要求、資料的範圍、符號什麼的
會涉及到正則表達，來驗證輸入資料的格式
2、例子：驗證郵件格式是否符合要求
- html部分：
驗證在onblur時開始，onblur是文字框失去焦點的意思，具體的操作就是輸完資料後，點選瀏覽器其他空白處；獲得焦點是onfocus。
在form元素上使用onsubmit事件，針對表單進行攔截，返回true才能提交
<body> <form id="myForm" onsubmit="return validate()"> 請輸入email地址：<input type="text" name="email" id="email" value="" onblur="return validate()"> <span id="msg"></span> <div><button type="submit">顯示郵件</button></div> </form> </body>
- script部分：
正則表示式的規範——一定要有開始與結束：/^正則$/.test(要驗證的資料)
<script> function showEmail() { var showE = document.getElementById("email"); var msgE=document.getElementById("msg"); if (/^\[email protected]\w+\.\w+$/.test(showE.value)) { // alert("email格式正確" + showE.value); msgE.innerHTML="<font color='aqua'>email輸入正確!</font>"; return true; } else { // alert("email格式錯誤" + showE.value); msgE.innerHTML="<font color='red'>email輸入錯誤!</font>"; return false; } } function validate(){ return showEmail(); } </script>
二、密碼驗證
1、思路：前端大概是這樣，我們都很熟悉的套路：
第一次輸入密碼時，只檢查輸入是否為空，為空則發出錯誤提示
第二次輸入密碼時，檢查是否為空，不為空時，檢查與第一次輸入的密碼是否是一致
2、html部分：
<head> <meta charset="UTF-8"> <title>密碼驗證</title> <script type="text/javascript" src="Js/pwdValidateJs.js"></script> </head> <body> 輸入密碼：<input type="password" name="pwd" id="pwd"><span id="pwdMsg" ></span><br> 確認密碼：<input type="password" name="config" id="config"><span id="configMsg"></span> </body>
2、js部分：判斷是否為空部分的程式碼值得日後在其他地方使用。
window.onload=function () {
var pwdElement=document.getElementById("pwd");
var configElemrnt=document.getElementById("config");
pwdElement.addEventListener("blur",validatePwd, false);
configElemrnt.addEventListener("blur",validateConfig,false);
}
function validatePwd(){
return validateEmpty("pwd");
}
function validateConfig(){
if (validateEmpty("config")){
return validateRepeat("pwd","config");
}
return false;
}
function validateEmpty( elementname ) {
var objElement=document.getElementById(elementname);
var msgElement=document.getElementById(elementname+"Msg");
var str = objElement.value.replace(/(^\s*)|(\s*$)/g, '');
if (str == '' || str == undefined || str == null){
msgElement.innerHTML="<font color='#dc143c'>輸入內容無效！</font>";
return false;
}else{
msgElement.innerHTML="<font color='#006400'>輸入內容有效！</font>";
return true;
}
}
function validateRepeat(srcName, desName) {
var srcElement=document.getElementById(srcName);
var desElement=document.getElementById(desName);
var desMsgElement=document.getElementById(desName+"Msg");
if (srcElement.value==desElement.value) {
desMsgElement.innerHTML="<font color='#006400'>輸入一致！</font>";
return true;
}else{
desMsgElement.innerHTML="<font color='#dc143c'>兩次輸入不一致！</font>";
return false;
}
}
三、單選鈕 radio
1、特點：多個radio的id都一樣！！且同一標籤元素的id 和name必須一樣！ 就像java中的物件陣列
2、例子：選擇性別，並顯示出來
document.all("sex")將這樣一組的標籤元素都取出，然後用for迴圈對其中的各個元素的value進行判斷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3 單選鈕操作</title>
<script>
function showSex(){
// var sex=document.getElementById("sex");
// alert("性別是："+sex.value);
var sex=document.all("sex")
for (i=0;i<sex.length;i++){
if (sex[i].checked==true){
alert("被選中的是："+sex[i].value)
}
}
}
</script>
</head>
<body>
請選擇性別：<input type="radio" name="sex" id="sex" value="男" checked>男 <!--設定一個預設值-->
<input type="radio" name="sex" id="sex" value="女" >女<br>
<button onclick="showSex()">顯示性別</button>
</body>
</html>
四、複選框 checkbox
1、特點：多個checkbox的id都一樣！！且同一標籤元素的id 和name必須一樣！
document.all（"id"）取出這一組的值
2、全選的實現，改變element.checked
3、例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.4 複選框操作</title>
<script>
function showInst(){
// var sex=document.getElementById("sex");
// alert("性別是："+sex.value);
var fruit=document.all("fruit")
var show="你選擇的水果是：";
for (i=0;i<fruit.length;i++){
if (fruit[i].checked){
show+=fruit[i].value+"、";
}
}
alert(show);
}
function selectAll() {
var seleElement=document.getElementById("selAll");
var fruit=document.all("fruit");
for (i=0;i<fruit.length;i++){
fruit[i].checked=seleElement.checked;
}
}
</script>
</head>
<body>
請選擇你喜歡的水果：<br>
<input type="checkbox" value="蘋果" name="fruit" id="fruit" >蘋果<br>
<input type="checkbox" value="香蕉" name="fruit" id="fruit" >香蕉<br>
<input type="checkbox" value="橙子" name="fruit" id="fruit" >橙子<br>
<input type="checkbox" value="菠蘿" name="fruit" id="fruit" >菠蘿<br>
<input type="checkbox" value="葡萄" name="fruit" id="fruit" >葡萄<br>
<br><br><br>
<input type="checkbox" value="全選" name="selAll" id="selAll" onclick="selectAll()">全選
<button onclick="showInst()">顯示選擇的水果</button>
</body>
</html>
五、下拉列表框<select>
有兩種方式來實現：
方式一：this.value的方式直接向處理函式傳遞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.5 下拉列表框(方式1)</title>
<script>
function showCity(city){
alert("你的家鄉是："+city);
}
</script>
</head>
<body>
你的家鄉：<select name="city" id="city" onchange="showCity(this.value)">
<option value="北京-BJ">北京</option>
<option value="上海-SH">上海</option>
<option value="杭州-HZ">杭州</option>
</select>
</body>
</html>方式二：getElementById的方式-推薦這種，比較習慣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.5 下拉列表框(方式2)</title>
<script>
function showCity(){
var cityElement=document.getElementById("city")
alert("你的家鄉是："+cityElement.value);
}
</script>
</head>
<body>
你的家鄉：<select name="city" id="city" onchange="showCity()">
<option value="北京-BJ">北京</option>
<option value="上海-SH">上海</option>
<option value="杭州-HZ">杭州</option>
</select>
</body>
</html>
六、文字域輸入<textarea>
1、在輸入的同時檢查文字的數目是否超過上限
2、例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.6 文字域</title>
<script>
function validateNote(){
var noteElement=document.getElementById("note");
var msgElement=document.getElementById("noteMsg");
// msgElement.innerHTML="輸入資料長度："+noteElement.value.length;
if (noteElement.value.length<15) {
msgElement.innerHTML="<font color='green'>還可以輸入"+(15-noteElement.value.length)+"</font>";
document.getElementById("sub").disabled=false;
}
else{
msgElement.innerHTML="<font color='red'>輸入文字數目超過上限！</font>";
document.getElementById("sub").disabled=true;
}
}
</script>
</head>
<body>
<form action="show.html" method="post">
描述：<br>
<textarea id="note" name="note" cols="50" rows="10" onkeydown="validateNote()">請在此輸入...</textarea>
<br>
<span id="noteMsg"></span><br>
<button type="submit" id="sub" name="sub">儲存</button>
</form>
