html+js实现form表单多值的验证
来源:互联网 发布:淘宝店铺装修素材图 编辑:程序博客网 时间:2024/06/05 16:39
实现form表单同时验证多条数据。
1.html部分与js缩进有些不太一样,不影响内容
2.截图没传上去,请自行复制代码查看
注意:需要验证的html部分写到最前面,比如名字,性别,和邮箱要验证,就写到最上面,不然会因为中间有不需要验证的内容而报错。
话不多说,直接写代码:
<html> <head> <style type="text/css"> table,td,th { border:1px solid black; } .error {color: #FF0000;} table { text-align:center; width:800px; } input { text-align:center; } th { height:50px; } </style> <script type="text/javascript"> function check(){ var test = document.getElementById("surnameId").value; if (test.length < 1 ) { alert("姓不能为空"); document.getElementById("surnameId").focus(); return false; } var test = document.getElementById("nameId").value; if (test.length < 1 ) { alert("名不能为空"); document.getElementById("nameId").focus(); return false; } var test = document.getElementById("sexId").value; if (test.length < 1 ) { alert("性别不能为空"); document.getElementById("sexId").focus(); return false; } var email = document.getElementById("emailId").value; if (email != "") { var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; isok= reg.test(email); if (!isok) { alert("邮箱格式不正确,请重新输入!"); document.getElementById("emailId").focus(); return false; } } return true; } </script> </head> <body> <form method="post" action="show.php" onSubmit="return check()"> <table> <tr> <th><h2>登录</h2></th> </tr> <tr> <table> <tr> <td>姓:</td> <td><input type="text" name="surname" id = "surnameId"> 例如: 张 <span class="error">* 姓是必须的</span> </td> </tr> <tr> <td>名:</td> <td><input type="text" name="name" id = "nameId"> 例如: 三 <span class="error">* 名必须写</span> </td> </tr> <tr> <td>性别:</td> <td> <input type="radio" id = 'sexId' name="sex" value="female" checked>女性 <input type="radio" id = 'sexId' name="sex" value="male">男性 <span class="error">* 性别必选</span> </td> </tr> <tr> <td>电邮:</td> <td><input type="text" name="email" id = "emailId"> 例如: ******@qq.com</td> </tr> <tr> <td>生日:</td> <td><input type="date" name="birthday"> 例如: 1992/06/01</td> </tr> <tr> <td>手机:</td> <td><input type="text" name="phone" id = "phoneId"> 例如: 132****1234</td> </tr> <tr> <td>学校:</td> <td><input type="text" name="school"> 例如: 学校.专业</td> </tr> <tr> <td>技能:</td> <td><input type="text" name="ability"></td> </tr> </table> </tr> <tr> <td><input type="submit" name="submit" value="提交" > </td> <td><input name=reset type=reset value=重置></td> </tr> </table> </form> </body></html>
0 0
- html+js实现form表单多值的验证
- Html JS实现表单验证
- 一个关于form表单验证的js
- JS对form表单的验证
- Form表单的验证
- js实现的表单验证
- JS实现表单的验证
- html的表单form
- 表单验证form.js驱动模块的应用
- Html form 表单提交前验证
- Html form 表单提交前验证
- Html form 表单提交前验证
- Html form 表单提交前验证
- Html form 表单提交前验证
- JS验证表单实现
- JS实现表单验证
- JS实现表单验证
- form表单验证的原理
- laravel lang多语言本地化处理
- 深入理解DB2索引(Index)
- Android Studio Terminal 不是内部或外部命令,也不是可运行程序或批处理文件
- 盘点国内网站常用的一些 CDN 公共库加速服务
- varchar和Nvarchar区别
- html+js实现form表单多值的验证
- 洛谷 U5773 受望先锋
- 微信公众平台显示隐藏网页右上角菜单(第九课)
- java中静态,有无返回值,有无参数及调用方法
- 100道动态规划11——UVA 10817 Headmaster's Headache 刷表法 小小的位运算
- crontab定时删除tomcat日志
- 一分钟读懂Java的线程中断
- (九)Spring详解——AOP面向切面编程实现
- 正则表达式浅识