js表单验证(提示版)

代码块


<!--表单提交--->
<!DOCTYPE html>
<html>
<head><title>去除空白</title>
</head>
<body><script type="text/javascript">window.onload=function(){//用户名字事件:document.getElementById("username").onblur=function(){var RegExp=/^[a-zA-Z0-9_]{3,16}$/;var user=document.getElementById("username").valueif(!RegExp.test(user)){document.getElementById("innerspan").innerHTML="<font color=red>用户名格式不正确</font>"}document.getElementById("username").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("username").value="";}document.getElementById("innerspan").innerHTML="";}document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//用户密码事件document.getElementById("password").onblur=function(){    //正则表达式var RegExp=/^[a-zA-Z0-9_]{3,16}$/;var password=document.getElementById("password").valueif(!RegExp.test(password)){document.getElementById("innerspan").innerHTML="<font color=red>用户密码格式不正确</font>"}document.getElementById("password").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("password").value="";}document.getElementById("innerspan").innerHTML="";}document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//确认密码document.getElementById("dbpassword").onblur=function(){//获取原始密码var  password=document.getElementById("password").value;//获取确认密码var  dbpassword=document.getElementById("dbpassword").value;//验证if(password!=dbpassword){document.getElementById("innerspan").innerHTML="<font color=red>用户密码不一致</font>" }//清理原先的值 获取焦点事件document.getElementById("dbpassword").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("dbpassword").value="";} document.getElementById("innerspan").innerHTML="";}//清楚span提示 点击事件document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//邮箱验证document.getElementById("email").onblur=function(){//获取邮箱var email=document.getElementById("email").value;//正则表达cvar RegExp=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!RegExp.test(email)){document.getElementById("innerspan").innerHTML="<font color=red>用户邮箱格式不对</font>" }document.getElementById("email").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("email").value="";}document.getElementById("innerspan").innerHTML="";}document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//注册事件，提交表单document.getElementById("button").onclick=function(){//触发所有框的blur事件username.blur();username.focus();password.blur();password.focus();dbpassword.blur();dbpassword.focus();email.blur();email.focus();if(document.getElementById("innerspan").innerHTML==""){//提交表单document.getElementById("userform").submit();}}}</script><!--form表单-->
<form action="http://8080//asss" method="post" id=userform><table><tr><td>用户姓名:</td><td><input type="text" id=username></td></tr><tr><td>用户密码:</td><td><input type="password" id=password></td></tr><tr><td>验证密码:</td><td><input type="password" id=dbpassword></td></tr><tr><td>用户邮箱:</td><td><input type="test" id=email></td></tr><tr><td><input type="button" value="提交" id=button><input type="reset" value="重置" id=reset ></td></tr></table>
</form><span id=innerspan></span>
</body>
</html>

运行结果:

用户名密码邮箱不对就会提示，全部对了就可以提交

js表单验证(提示版)相关推荐

通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
validForm结合layer制作表单验证提示
首先要引入jquery,Validform和layer <script src="../js/jquery.min.js"></script> <sc ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
Jquery之AJAX用户注册表单验证(Vancl版)
Jquery用户注册表单验证(Vancl版),效果图实例下载:DEMO 转载于:https://www.cnblogs.com/xiaobaigang/archive/2009/12/30/1636 ...
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录一.效果图二.介绍三.代码 (1)HTML (2)CSS (3)JavaScript J ...
JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1.长度限制 <p>1. 长度限制</p&g ...
js表单验证（常用的正则表达式）
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
js表单验证密码(确认密码)，密码长度至少8位，并且英文与数字组合
js表单验证密码(确认密码) 案例需求:在注册时,输入密码对其进行密码强度验证,并判断两次输入的密码是否一致.例如,密码长度至少8位,并且英文与数字组合. 代码实现 <p>输入密码:< ...

js表单验证(提示版)

js表单验证(提示版)相关推荐

最新文章

热门文章