Js表单字段验证与事件实例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>表单字段验证与事件</title>
<script language="JavaScript">
// 表单验证
function validate(){
   var objForm = document.myForm;
   var strUsername = objForm.myUserName.value;
   var strName = objForm.myName.value;
   if (strUsername == "" || strName == ""){
      alert("没有输入用户名称或姓名!");
      event.returnValue = false;
   }
   if (!(objForm.mySex[0].checked || objForm.mySex[1].checked)){
      alert("请输入性别!");
      event.returnValue = false;
   }
   if (myForm.mySelect.options[0].selected){
      alert("请选择个人收入!");
      event.returnValue = false;
   }
}
// 检查姓名
function checkName(objEle){
   if (objEle.value == ""){
      alert("请输入姓名!");
      objEle.focus();
      objEle.select();
   }
}
// 检查用户名称
function checkUserName(objEle){
   if (objEle.value.length < 3){
      alert("请输入用户名称（大于3个字符）!");
      objEle.focus();
      objEle.select();
   }
}
</script>
</head>
<body>
<h2>表单字段验证与事件</h2>
<hr>
<form name="myForm" action="Ch9-6.asp" method="post" onsubmit="validate();">
用户名称 : <input type="text" name="myUserName" onchange="checkUserName(this)"><br>
用户密码 : <input type="password" name="myPassword"><br>
姓名 : <input type="text" name="myName" onblur="checkName(this)"><br>
性别 : <input type="radio" name="mySex" value="male">男 
       <input type="radio" name="mySex" value="female">女<br>
<select name="mySelect">
<option value="0" Selected>薪水</option>
<option value="1">少於$20,000</option>
<option value="2">$20,000~$30,000</option>
<option value="3">$30,000~$40,000</option>
<option value="4">$40,000以上</option>
</select><br><br>
<input type="submit" value="送出">
<input type="reset"  value="重设">
</form>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js表单字段验证与事件实例

分类

表单按钮

描述

JavaScript表单字段验证与事件实例，验证表单用的，仅供参考。