。表單驗證
<script type="text/javascript">
function chkjoin(){
if(document.form.username.value.length<5){
alert('帳號錯誤！！ 請輸入5個以上的英文或數字');
}
if(document.form.password.value.length<5){
alert('密碼錯誤！！ 請輸入5個以上的英文或數字');
}
if(document.form.password.value!= ocument.form.chkpass.value){
alert('密碼錯誤！！請確認你輸入的密碼是否一致');
}
if(document.form.name.value.length<2){
alert('暱稱錯誤！！請輸入2個字以上的中英文數字');
}
var count = 0;
for(i=0;i<form.sex.length;i++){
if(form.sex.checked){
count++;
}
}
if(count==0){
alert('性別錯誤！！請選擇你的性別');
}
var rege = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\- ])+\.) +([a-zA-Z0-9])+$/;
if (rege.exec(document.form.email.value) == null){
alert('信箱錯誤！！請詳細填寫你的信箱');
}
}
</script>
。將頁面跳回錯誤選項
document.form.username.focus()
。集合錯誤訊息
<script type="text/javascript">
function chkjoin(){
var errtxt="";
if(document.form.username.value.length<5){
errtxt ="帳號錯誤！！ 請輸入5個以上的英文或數字 \n";
}
if(document.form.password.value.length<5){
errtxt ="密碼錯誤！！ 請輸入5個以上的英文或數字 \n";
}
if(errtxt ==") return true;
else{
alert(errtxt);
return false;}
}
</script>
引用自[說走就走]
。Radio Bottom驗證
<script>
function chk(){
var items = document.getElementsByName('product');
for(var i=0;i<items.length;i++){
if(items[i].checked == true){
return true
}
}
alert(' 請 選 擇 款 式 ');
return false;
}
</script>
<form action="re_mimi.php" method="post" name=f9 onsubmit="return chk();">
<input type="radio" name="product" value="１">
<input type="radio" name="product" value="２">
<input type="radio" name="product" value="其它">
<input type="submit" value="寫 好 送 出">
原CODE
我來解釋一下為什麼會錯誤好了
//當選擇2或其他時條件成立
if( f9.product[0].checked == false )
{
alert(" 請 選 擇 款 式 ");
//到此行時因為product他是一個html的集合體，可以說把1,2,其他放在一個陣列所以沒有所謂的focus();函式，如果要使用的話必須改為f9.product[0].focus();也因為在這兒錯誤所以不會執行到return false，所以表單也就會執行submit的動作了！
f9.product.focus();
return false;
}
引用自[NTHU 7-4 簡易表單資料驗證]
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>表單資料驗證：驗證各類控制項的資料</h2>
<hr>
<script>
function checkName(control) {
if (control.value == "") {
validatePrompt(control, "請輸入大名！");
return (false);
}
return (true);
}
function checkPassword(control) {
if (control.value.length != 5) {
validatePrompt(control, "請輸入長度為 5 的密碼！");
return (false);
}
return (true);
}
function checkGender(control) {
for (i=0; i<control.length; i++)
if (control[i].status)
return(true);
alert ("請輸入性別！");
return (false);
}
function checkNationality(control) {
for (i=1; i<control.length; i++)
if (control[i].selected)
return(true);
alert ("請輸入國籍！");
return (false);
}
function checkHobbies(control) {
var count=0;
for (i=1; i<control.length; i++)
if (control[i].selected)
count++;
if (count>=2)
return(true);
alert ("請輸入至少兩樣興趣！");
return (false);
}
function checkComment(control) {
if (control.value == "") {
validatePrompt(control, "請輸入您的寶貴意見！");
return (false);
}
return (true);
}
function validateForm(form) {
if (!checkName(form.realname)) return;
if (!checkPassword(form.password)) return;
if (!checkGender(form.gender)) return;
if (!checkNationality(form.nationality)) return;
if (!checkHobbies(form.hobbies)) return;
if (!checkComment(form.comments)) return;
alert ("你終於聽我的話了！\n全部資料通過驗證！\n表單即將送出！！！");
document.testform.submit(); // Submit form
}
function validatePrompt(control, promptStr) {
alert(promptStr);
control.focus();
return;
}
</script>
<form name=testform>
<P>貴性大名：<input type="text" name="realname" value="xxx">
<P>個人密碼：<input type="password" name="password">
<P>您的性別：<input type="radio" name="gender" value="male"> male
<input type="radio" name="gender" value="female"> female
<P>您的國籍：<select name="nationality">
<option>----<option>台灣<option>日本<option>韓國
</select>
<P>您的興趣：<select multiple name="hobbies">
<option>打球<option>下棋<option selected>聽音樂<option>閱讀<option>上網
</select>
<p>寶貴意見：<textarea name=comments cols=40 rows=3></textarea>
<P><input type="button" value="送出" onClick="validateForm(this.form)"><input type="reset">
</form>
<hr>
</body>
</html>
。大絕招 XD 各種語法集合體
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>
<body>
<h2 align=center>表單資料驗證：驗證各類控制項的資料</h2>
<hr>
<script>
function checkName(control) {
if (control.value == "") {
validatePrompt(control, "請輸入大名！");
return (false);
}
return (true);
}
function checkPassword(control) {
if (control.value.length != 5) {
validatePrompt(control, "請輸入長度為 5 的密碼！");
return (false);
}
return (true);
}
function checkGender(control) {
for (i=0; i<control.length; i++)
if (control[i].status)
return(true);
alert ("請輸入性別！");
return (false);
}
function checkNationality(control) {
for (i=1; i<control.length; i++)
if (control[i].selected)
return(true);
alert ("請輸入國籍！");
return (false);
}
function checkHobbies(control) {
var count=0;
for (i=1; i<control.length; i++)
if (control[i].selected)
count++;
if (count>=2)
return(true);
alert ("請輸入至少兩樣興趣！");
return (false);
}
function checkComment(control) {
if (control.value == "") {
validatePrompt(control, "請輸入您的寶貴意見！");
return (false);
}
return (true);
}
function validateForm(form) {
if (!checkName(form.realname)) return;
if (!checkPassword(form.password)) return;
if (!checkGender(form.gender)) return;
if (!checkNationality(form.nationality)) return;
if (!checkHobbies(form.hobbies)) return;
if (!checkComment(form.comments)) return;
alert ("你終於聽我的話了！\n全部資料通過驗證！\n表單即將送出！！！");
document.testform.submit(); // Submit form
}
function validatePrompt(control, promptStr) {
alert(promptStr);
control.focus();
return;
}
</script>
<form name=testform>
<P>貴性大名：<input type="text" name="realname" value="xxx">
<P>個人密碼：<input type="password" name="password">
<P>您的性別：<input type="radio" name="gender" value="male"> male
<input type="radio" name="gender" value="female"> female
<P>您的國籍：<select name="nationality">
<option>----<option>台灣<option>日本<option>韓國
</select>
<P>您的興趣：<select multiple name="hobbies">
<option>打球<option>下棋<option selected>聽音樂<option>閱讀<option>上網
</select>
<p>寶貴意見：<textarea name=comments cols=40 rows=3></textarea>
<P><input type="button" value="送出" onClick="validateForm(this.form)"><input type="reset">
</form>
<hr>
</body>
</html>
沒有留言:
張貼留言