验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
语言: JavaScript
分类: Web开发技术
最后更新于 2018-12-09 10:33
gistfile1.txt
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery/jquery-3.3.1.js"></script>
</head>
<body>
<fieldset>
<legend>用户注册页面</legend>
<!--
在JavaScript代码中如何获取form表单
通过id属性值获取表单
通过name属性值获取表单
document.forms-获取当前页面所有表单元素(数组)
document.表单名称
<form>元素
id属性-表单标识
name属性-表单名称
action属性-提交表单地址
method属性-请求类型(get/post)
<form>表单提交方式
在表单内定义submit按钮
表单绑定onsubmit
<form>元素具有submit()方法
-->
<!-- return formValidator();表示是否阻止表单行为,完整的js代码,并不只是简单的事件 -->
<form id="myform" name="myform" onsubmit="return formValidator();">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="user"></td>
<!-- 显示提示内容 -->
<td><div id="userTip"></div></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd"></td>
<!-- 显示提示内容 -->
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="repwd"></td>
<!-- 显示提示内容 -->
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td>email地址:</td>
<td><input type="email" id="email"></td>
<!-- 显示提示内容 -->
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="rigist" value="注册"></td>
<!-- 显示提示内容 -->
<td></td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
表单验证需求
用户名-不能为空,只能输入英文+数字,长度在6-12之间
密码-不能为空,只能输入英文,长度在6-8之间
确认密码-与密码的要求一致,两次密码要输入一致
email-不能为空
效果
获取焦点事件给出输入提示内容
失去焦点事件-完成对应元素的验证
验证成功-给出输入正确提示
验证失败-给出输入错误的提示
当提交表单之前保证表单内所有元素全部都是验证通过的
*/
function userValidator(){
//定义正则表达式
var regEXP=/^[a-zA-Z0-9]{6,12}$/;
var $myval=$("#user").val();
//不能为空
if($myval==""||$("#user").val()=="null"){
$("#userTip").text("用户名输入不嫩为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//英文+数字,长度在6-12
else if(!regEXP.test($myval)){
$("#userTip").text("用户名输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//输入正确
else{
$("#userTip").text("用户名输入正确").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}
function pwdValidaor(){
//定义正则表达式
var regEXP=/^[a-zA-Z]{6,8}$/;
var $myval=$("#pwd").val();
//不能为空
if($myval==""||$myval==null){
$("#pwd").text("密码不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
else if(!regEXP.test($myval)){
$("#pwdTip").text("密码输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
else{
$("#pwdTip").text("密码输入正确").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}
function repwdValidaor(){
//定义正则表达式
var regEXP=/^[a-zA-Z]{6,8}$/;
var $myval=$("#repwd").val();
var $pwd=$("#pwd");
//不能为空
if($myval==""||$myval==null){
$("#repwdTip").text("密码不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
else if(!regEXP.test($myval)){
$("#repwdTip").text("密码输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//验证两次密码输入一致
else if($myval!=$pwd.val()){
$("#repwdTip").text("两次密码输入不一致").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
else{
$("#repwdTip").text("密码输入正确").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}
function emailValidaor(){
//
var $emailval=$("#email").val();
if($emailval==""||$emailval==null){
$("#emailTip").text("email不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else{
$("#emailTip").text("email输入正确").css({
"color":"green",
"font-weight":"bold"
});
return true;
}
}
//1.用户名验证
$("#user").focus(function(){
//给出提示内容
$("#userTip").text("用户名输入错误").css({
"color":"black",
"font-weight":"normal"
});
//给出提示内容
$("#userTip").text("请输入英文或数字,长度在6-12为之间")
}).blur(userValidator);
//密码验证
$("#pwd").focus(function(){
$("#pwdTip").text("请输入英文,长度在6-8之间").css({
"color":"black",
"font-weight":"normal"
});
}).blur(pwdValidaor);
//确认密码
$("#repwd").focus(function(){
$("#repwdTip").text("请输入英文,长度在6-8之间").css({
"color":"black",
"font-weight":"normal"
});
}).blur(repwdValidaor);
//email验证
$("#email").focus(function(){
$("#emailTip").text("email不能为空").css({
"color":"black",
"font-weight":"normal"
});
}).blur(emailValidaor);
/*
提交表单前验证所有元素验证通过
为form表单元素绑定formValidator事件
事件对象,return value
是否阻止页面的元素的默认行为
false-表示阻止页面元素的默认行为
定义formValidator()必须具有返回值(boolean)
*/
function formValidator(){
//判断表单内素有元素全部验证通过
if(userValidator&&pwdValidaor&&repwdValidaor&&emailValidaor){
alert("表单验证成功");
return true;
}else{
alert("表单验证失败");
return false;
}
}
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助