首页 / JAVASCRIPT / JavaScript实现表单验证

JavaScript实现表单验证

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现表单验证，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2121字，纯文字阅读大概需要4分钟。

内容图文

    表单验证可以通过 JavaScript 来完成

以下示例代码用于判断表单字段(Name)值是否存在，如果存在，则弹出信息，否则阻止表单提交：

 

JavaScript实现表单验证 - 文章图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单验证</title>
 6     <script type="text/javascript">
 7         function myFunction(){
 8 
 9             var x=document.forms["Form"]["Name"].value;
10             if(x=null||x=="")
11             {
12                 alert("请输入名字！！");
13                 return false;
14             }
15         }
16 
17 
18 
19     </script>
20 </head>
21 <body>
22 
23     <form name="Form" action="#" onsubmit="return myFunction()" method="post">
24         名字：<input type="text" name="Name">
25         <input type="submit" value="提交">
26 
27 
28     </form>
29     
30 </body>
31 </html>

JavaScript 验证输入的数字

示例：

JavaScript实现表单验证 - 文章图片

 

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>验证输入的数字</title>
 6 </head>
 7 <body>
 8     <p><strong>请输入1到10之间的数字：</strong></p>
 9     <input id="number">
10     <button type="button" onclick="myFunction()">提交</button>
11     
12     <script type="text/javascript">
13         function myFunction(){
14         
15 
16          var x=document.getElementById("number").value;//获取id="number"的值
17         //如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误
18         if(isNaN(x)||x<1||x>10)
19             {
20                 alert("您输入有误，请输入1到10之间的数字！！！");
21             }else{
22         alert("您输入正确");
23     }
24 }
25 
26    </script>
27 </body>
28 </html>

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (Name) 的值为空, required 属性会阻止表单提交：

required可实现点击提交按钮，如果输入框是空的，浏览器会提示错误信息。

示例：

JavaScript实现表单验证 - 文章图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML 表单自动验证</title>
 6 </head>
 7 <body>
 8     &nbsp;&nbsp;
 9   <form action="#" method="post" >
10   <input type="text" name="Name" required="required">
11   <input type="submit" value="提交">
12   </form>
13   </body>
14 </html>

注：Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

内容总结

以上是互联网集市为您收集整理的JavaScript实现表单验证全部内容，希望文章能够帮你解决JavaScript实现表单验证所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/841841.html

来源：【匿名】