フォーム検証と2段階連動
5758 ワード
フォーム検証
フォーム検証は、Webサイトを登録する際によく使用される機能です.
現在サポートされている条件は次のとおりです.
null
email
char-normal//英語、数字、下線char-chinese//中国語、英語、数字、下線、中国語句読点char-english//英語、数字、下線、英語句読点length:1-10 //length:4
equal:xxx//はオブジェクトの値に等しく、ハイフンの後はjqセレクタ構文です.
ajax:fun()
real-time//リアルタイムチェックdate //2014-10-31
time //10:30:00
datetime //2014-10-31 10:30:00
money//正数、2桁の小数uint:1//正の整数、パラメータは開始値easytip//属性はプロンプトボックスの構成であり、構成可能な属性はである.
left: 0,
top: 0,
position: "right", //top, left, bottom, right
disappear: "other", //self, other, lost-focus, none, N seconds
speed: "fast",
theme:「white」//現在はwhite、black、blue、red のみ
arrow: "bottom", //top, left, bottom, right
にだんれんどう
フォーム検証は、Webサイトを登録する際によく使用される機能です.
現在サポートされている条件は次のとおりです.
null
char-normal//英語、数字、下線char-chinese//中国語、英語、数字、下線、中国語句読点char-english//英語、数字、下線、英語句読点length:1-10 //length:4
equal:xxx//はオブジェクトの値に等しく、ハイフンの後はjqセレクタ構文です.
ajax:fun()
real-time//リアルタイムチェックdate //2014-10-31
time //10:30:00
datetime //2014-10-31 10:30:00
money//正数、2桁の小数uint:1//正の整数、パラメータは開始値easytip//属性はプロンプトボックスの構成であり、構成可能な属性はである.
left: 0,
top: 0,
position: "right", //top, left, bottom, right
disappear: "other", //self, other, lost-focus, none, N seconds
speed: "fast",
theme:「white」//現在はwhite、black、blue、red のみ
arrow: "bottom", //top, left, bottom, right
<!DOCTYPE html>
<html>
<head>
<title> .html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// ,
//1 , 6 10 . . "_" .
function fun1(){
var flag = true;
if(!checkEmail()){
flag = false;
}
if(!checkName()){
flag = false;
}
alert(flag);
return flag;
}
//
function checkEmail(){
//1
var email = document.form1.email.value;
//2
var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
//3
if(!reg.test(email)){
// => , false
addError(document.form1.email," !");
return false;//
}else{
removeError(document.form1.email);
return true;
}
}
//
function checkName(){
//1
//var nameInput= document.getElementsByName("name")[0];
var nameInput = document.form1.name;
//var name = nameInput.getAttribute("value");
var name = nameInput.value; //DHTML
//2
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
//3
if(!reg.test(name)){
// => .
//alert(" 6 10 , !");
addError(nameInput," 6 10 , !");
return false;//
}else{
// =>
removeError(nameInput);
return true;
}
}
//
// 1 :
// 2 :
function addError(where,what){
where.nextSibling.innerHTML=what;
}
//
function removeError(where){
where.nextSibling.innerHTML="";
}
</script>
</head>
<body>
<form action="" name="form1" onsubmit="return fun1();" >
<table border="1" width="30%" >
<tr>
<th colspan="2" align="center" >
</th>
</tr>
<tr>
<td> :</td>
<td><input type="text" name="name" onblur="checkName();" /><font color="red" ></font></td>
</tr>
<tr>
<td> :</td>
<td><input type="text" name="email" /><font color="red" ></font></td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="submit" value=" " />
</td>
</tr>
</table>
</form>
</body>
</html>
にだんれんどう
<!DOCTYPE html>
<html>
<head>
<title> .html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//json
// java map
/*
var json = {"name":"tom","age":18};
// json
for(var key in json){
//alert(key);
alert(key+"==>"+json[key])
}
*/
//---------------------------------------------------------
var json = {" ":[" "," "," "],
" ":[" "," "," "],
" ":[" "," "," "]};
//
function fun1(){
//1 select
var province = document.getElementById("province");
//2 json
for(var key in json){
// option
var option = document.createElement("option");
option.innerHTML = key; // <option> </option>
// option select
province.appendChild(option);
}
}
function fun2(){
//1 select
var province = document.getElementById("province");
var city = document.getElementById("city");
//2
city.length =1;
//3
if(!province.selectedIndex){
// =>
return;
}
var options = province.options;
var pName = options[province.selectedIndex].innerHTML;
//4 json
var cities = json[pName];
//5
for(var i = 0 ; i<cities.length;i++){
var cityName = cities[i];
// option
var option = document.createElement("option");
option.innerHTML = cityName;
// option select
city.appendChild(option);
}
}
</script>
</head>
<body onload="fun1();" >
<select id="province" onchange="fun2();" >
<option>--- ---</option>
</select>
<select id="city" >
<option>--- ---</option>
</select>
</body>
</html>