JavaScript 完成注册页面表单校验的实例
5星 · 超过95%的资源 66 浏览量
2020-12-10
02:07:07
上传
评论 1
收藏 59KB PDF 举报 
JavaScript 完成注册页面表单校验的实例完成注册页面表单校验的实例
1、步骤分析、步骤分析
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
问题：如何控制表单提交？问题：如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。
onsubmit = return checkForm()
2、完成注册页面表单校验、完成注册页面表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue=document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空");
return false;
}
/**校验密码*/
var pValue=document.getElementById("password").value;
if(pValue==""){ //注意空的表示方法
alert("密码不能为空");
return false;
}
/** 校验确认密码*/
var rpValue=document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致！");
return false;
}
/**校验邮箱*/
var eValue=document.getElementById("email").value;
if(！/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
weixin_38526823
- 粉丝: 5
- 资源: 946
评论10