javascript与表单互操作（核心）-03

最新推荐文章于 2023-02-05 09:15:00 发布

原创最新推荐文章于 2023-02-05 09:15:00 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用JavaScript进行表单元素交互与数据验证的方法，包括文本框、密码框、单选按钮、复选框的数据获取及验证逻辑。通过具体代码示例展示了如何利用正则表达式进行邮箱格式校验，如何通过onsubmit事件控制表单提交，以及如何实时反馈用户输入状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

与表单互操作（核心）（JavaScript3）

JavaScript现阶段的重点在于表单的互操作上，所以下面将使用一系列的代码进行验证。

范例：取得文本数据
在表单之中每一个表单元素都有两个重要的属性：name,id，一般而言，这两个属性的内容一定要保持一致，
其中name是留给服务器端接受数据使用的，而id是留给页面进行JavaScript操作（document,getElementById（函数））
“onclick”表示的是一个单击事件，表示按下

范例：实现email验证
之前的程序只是输入了一个普通的文本，但是在程序里面并没有进行验证，下面以一个最基础的邮件验证开始。
在JavaScript之中如果要使用正则，采用如下写法：/^正则符号$/.test(数据)
<html>
<head>
<title>JavaScript应用</title>
<script type="text/javascript" >
function validate(){//进行表单的验证
   //取得两个input元素对象
   var uidObj=document.getElementById("uid");
   var emailObj=document.getElementById("email");
   if(uidObj.value.length==0){
   alert(用户名不能为空);
   }
   if(!/^\w+@\w+\.\w+$/.test(email.value)){
   alert("请输入正确的邮箱");
   }
}
</script>
</head>
<body>
<form action="welcome.htm" method="post">
用户名：<input type="text" name="uid" id="uid" ><br>
邮  箱:<input type="text" name="email"
id="email" ><br>
<input type="submit" value="提交" onclick="validate()">
<input type="reset" value="重置">
</form>
</body>
</html>

以上的验证方式根本就不可能使用

实现验证

范例：实现验证
在实现表单验证操作过程之中，有一个最为重要的事件，这个事件是写在form表单上的——onsubmit,此
事件表示在表单提交时自动拦截。那么如果要想控制表单验证，则必须对此事件进行处理，如果验证通过（
true），如果验证不通过（false）。
1.为了方便学习，将表单定义在input.htm页面上
2.将图片保存在images目录下；
3.建立一个css文件夹，保存样式表文件
<link type="text/css" href="css/form.css" rel="stylesheet">
4.建立一个js文件夹，保存input.js文件，这个文件主要用于验证input.htm页面中的表单；
<script type="text/javascript" src="js/input.js" ></script>

5.修改input.htm页面，导入css文件
<html>
<head>
<title>JavaScript应用</title>
<script type="text/javascript" >
function validate(){//进行表单的验证
   return validateUid()&&validateEmail();
}
   function validateUid(){
       //取得元素对象
       var uidObj=document.getElementById("uid");
       //取得span元素对象
       var   uidSpan=document.getElementById("uidMsg");
       if(uidObj.value.length>0){ //输入正确
           uidSpan.innerHTML="<font
           color=\"green\">用户名输入正确</font>";
           return true;
       }else{
       uidSpan.innerHTML="<font
           color=\"red\">用户名输入失败</font>";
           return false;
       }
   }
   function validateEmail(){
       //取得元素对象
       var emailObj=document.getElementById("email");
       //取得span元素对象
       var   emailSpan=document.getElementById("emailMsg");
       if(/^\w+@\w+\.\w+$/.test(emailObj.value)){
           emailSpan.innerHTML="<font
           color=\"green\">邮箱输入正确</font>";
           return true;
           }else{
       uidSpan.innerHTML="<font
           color=\"red\">邮箱输入失败</font>";
           return false;
       }
       }
</script>
</head>
<body>
<form action="welcome.htm" method="post" onsubmit="return validate()">
用户名：<input type="text" name="uid" id="uid"
onblur="validateUid()"><span id="uidMsg">*</span><br>
邮  箱:<input type="text" name="email"
id="email" onblur="validateEmail()"><span id="emailMsg">*</span><br>
<input type="submit" value="提交" >
<input type="reset" value="重置">
</form>
</body>
</html>

实现密码验证

以上验证的是文本框，那么下面进行密码框的验证，对于密码框在实际的操作里面只会有以下的几种功能：
判断是否输入，重复密码是否正确，如果有需要则使用ActiveX进行加密
范例：实现密码验证
<html>
<head>
<title>JavaScript应用</title>
<script type="text/javascript" >
function validate(){//进行表单的验证
   return validateMypass()&&validateConfpass();
}
function validateMypass(){//验证密码是否为空
   var mypassObj=
   document.getElementById("mypass");
   var mypassSpan=
   document.getElementById("mypassMsg");
   if(mypassObj.value.length>0){
           return true;
   }else{
           return false;
       }
}
function validateConfpass(){
   var mypassObj=
   document.getElementById("mypass");
   var confpassObj=
   document.getElementById("confpass");
   var confpassSpan=
   document.getElementById("confpassMsg");
   if(mypassObj.value==confpassObj.value){
           return true;
   }else{
           return false;
       }
}

</script>
</head>
<body>
<form action="welcome.htm" method="post" onsubmit="return validate()">
输入密码：<input type="password" name="mypass" id="mypass" onblur="validateMypass()" ><span id="myassMsg" ></span><br>
确认密码：<input type="password" name="confpass" id="confpass"
onblur="validateConfpass()"><span id="confpassMsg"></span><br>
<input type="submit" value="提交" >
<input type="reset" value="重置">
</form>
</body>
</html>

取得单选钮数据

范例：取得单选钮数据
<html>
<head>
<title>JavaScript应用</title>
<script>
   function showInfo(){
   //取得多个sex标注的组件
   var sexObj=document.all("sex");
   for(var x=0;x<sexObj.length;x++){
   if(sexObj[x].checked){//此元素是否被选中
       alert("XX的性别:"+sexObj[x].value);
       }
   }
}
</script>
</head>
<body>
请选择XX性别：
   <input type="radio" name="sex" id="sex"
   value="男">男
   <input type="radio" name="sex" id="sex"
   value="女">女
   <input type="radio" name="sex" id="sex"
   value="中">中
   <input type="button" value="显示性别"
   onclick="showInfo()">
</body>
</html>

复选框

Java里面有对象数组这一概念，那么换到HTML页面之中也同样存在对象数组的概念，唯一不同的是，如果
多个元素的id（包含name）相同的时候，则会认为这是一个对象数组，如果是直接使用document.getElement
ById()取得，永远取得的是对象数组中的第一个元素，那么必须更换为“document.all()”取得。
在单旋钮中，可以通过判断每一个元素的“checked”属性来判断其是否被选中，此属性返回的是布尔型数据
只要是对象数组就要牵扯到每一个元素的依次判断。

范例：复选框
<html>
<head>
<title>JavaScript应用</title>
<script>
   function showInfo(){
   var msg="XX的兴趣：";
   //取得多个inst标注的组件
   var instObj=document.all("inst");
   for(var x=0;x<instObj.length;x++){
   if(instObj[x].checked){//此元素是否被选中
       msg+=instObj[x].value+",";
       }
   }
   alert(msg);
}
</script>
</head>
<body>
请选择XX的兴趣：<br>
   <input type="checkbox" name="inst" id="inst"
   value="篮球">篮球<br>
   <input type="checkbox" name="inst" id="inst"
   value="排球">排球<br>
   <input type="checkbox" name="inst" id="inst"
   value="足球">足球<br>
   <input type="checkbox" name="inst" id="inst"
   value="球球">球球<br>
   <input type="checkbox" name="inst" id="inst"
   value="小球">小球<br>
   <input type="checkbox" name="inst" id="inst"
   value="大球">大球<br>
   <input type="button" value="显示兴趣"
   onclick="showInfo()">
</body>
</html>