WEB前端表单验证源码

前端表单验证源码如下!

<html>
<head>
<meta charset=”utf-8″>
<title>表单验证</title>
<style type=”text/css”>
span{
color: red;
font-size: 12px;
font-style:oblique;
}
</style>
</head>

<body background=”005.jpg”>
<script type=”text/javascript”>
window.onload = function(){

var getUsername = document.getElementById(“username”);
var usernameError1 = document.getElementById(“usernameError”);
//先绑定一个blur事件
getUsername.onblur = function(){
//进行空处理
var getUsername1 = getUsername.value;
getUsername2=getUsername1.trim();

//热点出来
if(getUsername2 == false){
//显示空字符异常
usernameError1.innerHTML = “用户名输入不合法”;
}else{
//长度限制
if(getUsername2.length < 6 ||getUsername2.length > 14){
usernameError1.innerText = “用户名长度必须在[6-14]位之间”;
}else{
//用户名只能由数字和字母组成
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(getUsername2);
if(ok){

}else{
usernameError1.innerText = “用户名只能由数字和字母组成”;

}
}
}

// usernameError1是onblur时候的

}
//热点回去
getUsername.onfocus = function(){
var usernameError2 = document.getElementById(“usernameError”);
//如果后面出现红色字体,则清空前面的内容
if(usernameError2.innerHTML != “” ){
getUsername.value = “”;
}
// //处理长度不合法字符
// if(getUsername.length < 6 ||getUsername.length > 14){
// getUsername.value = “”;
// }

usernameError2.innerHTML = “”;
// usernameError2是onfocus时候的
}
//针对密码的操作

//获取验证密码
var get2 = document.getElementById(“2”);

//获取错误提示
var userpsd3 = document.getElementById(“3”);

get2.onblur = function(){
var userpsd2= get2.value;

//获取密码
var get1 = document.getElementById(“1”);
var userpsd1= get1.value;
//验证密码不能为空
if(userpsd2 == “”){
userpsd3.innerHTML = “确认密码不能为空”;
}
//验证密码和密码是否相同
if(userpsd2 != userpsd1){
//密码错误
userpsd3.innerHTML = “确认密码和密码不一致”;
}else{
//密码正确
}
}

//密码热点回去
get2.onfocus = function(){
var userpsd3 = document.getElementById(“3″);
if(userpsd3.innerHTML !=””){
//密码和验证密码不一致
var get2 = document.getElementById(“2”);
get2.value = “”;
userpsd3.innerHTML = “”;
}else{
//密码和验证密码一致
}
}

//对邮箱进行操作之失焦
//获取邮箱span
var getMbError = document.getElementById(“mbError”);
//获取邮箱
var getMb = document.getElementById(“mb”);
// var getMb1 = getMb.value.trim();
//绑定事件
getMb.onblur = function(){
//注意var getMb1 = getMb.value的位置
var getMb1 = getMb.value;
//编写正则
// var regExp =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var regExp1 = /^[A-Za-z0-9]+$/;
var ok = regExp1.test(getMb1);
if(ok){
//邮箱格式正确

}else{
//邮箱格式错误
getMbError.innerHTML = “邮箱地址不合法”;
}
}

//对邮箱进行操作之得焦
getMb.onfocus = function(){
//判断是否后面报错
if(getMbError.innerHTML = “”){
//正确
}else{
//格式错误
getMbError.innerHTML = “”;
// getMb.value = “”;不能出现
}
}

//鼠标单击事件
var userbtn = document.getElementById(“userbtn”);
userbtn.onclick = function(){
//代码自动出触发事件

//触发用户名验证
getUsername.focus();
getUsername.blur();

//触发验证密码
get2.focus();
get2.blur();

//触发邮箱验证
getMb.focus();
getMb.blur();

//进行判断
if(getMbError.innerHTML == “” && userpsd3.innerHTML == “” && usernameError1.innerHTML==””){
var idForm = document.getElementById(“idForm”);
idForm.submit();

}
}
}

</script>
<!–使用表单–>
<form id = “idForm” action=”http://loclhost:8080/jd/save” method=”get”>
用户名:<input type=”txt” name =”用户名” id =”username” /><span id=”usernameError”></span><br>
密码:<input type=”txt” name =”密码” id = “1”/><br>
确认密码:<input type = “txt” id =”2″/><span id=”3″></span><br>
邮箱:<input type = “txt” name=”邮箱” id= “mb”/><span id=”mbError”></span><br>
<input type=”button” value=”提交” id=”userbtn” />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=”reset” value=”重置” id= “user” />
</form>
</body>
</html>

相关说明

(1)用户名不能为空

(2)用户名必须在6-14位之间

(3)用户名只能有数字和字母组成,不能含有其他符号(正则表达)

(4)密码和确认密码一致,邮箱地址合法

(5)统一失去焦点验证

(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。

(7)文本框再次失去焦点后,清空错误提示信息,如果文本框的数据不合法,要求清空文本框的value

(8)最终表单中的所有项均合法后可提交

————下载必看————

1、本站资源均通过互联网公开合法渠道获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、版权归作者或出版社方所有,本站不对涉及的版权问题负法律责任。若版权方认为本站侵权,请联系客服或发送邮件处理。
3、本站解压密码统一为:yudouyudou
4、部分压缩为part1、part2类型的,需要全部下载到电脑才能解压
5、解压工具推荐:电脑端推荐使用WINRAR(最新版),苹果电脑端用RAR解压王。
6、关于下载速度:下载速度慢的,请开通百度网盘超级VIP会员下载,本站不提供网盘vip账号,请自重。
7、关于字幕和声音:MKV的影视资源都是内封字幕音轨,网盘播放是无法解析的,下载到本地电脑用potplayer,手机用QQ影音播放。
资源失效请添加客服微信 “ civi58 ”,并发送资源编号+资源名称,我们会及时重新补发

米时光 » WEB前端表单验证源码

发表评论