1. 完成一个表单
2. 需求
a. 所有内容不可以为空
c. 用户名与密码长度必须6位以上
3. 我们可以使用下而表达式来完成以上条件的判断
为空 /^\s*$/ 空字符的正则表达式可以通过test()方法来判断
邮箱格式 /^(\w)+@(\w)+(\.\w+)+$/
长度必须6位以上 /^(\w){6,}$/
4. 对于表单提交时，需要进行校验，可以使用onsubmit来进行校验，注意，如果使用onsubmit来操作，它必须写在form表单标签上，并且必须有返回值才可以控制表单是否可以提交。
<!DOCTYPE html>
<html>
<head>
<title>day0306.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function check1(){
return checkpasswrod()&&checkLength("username")&&checkLength()&&checkEm()&&checkNull("eamil")&&checkNull("username")&&checkNull("password")&&checkNull("repassword");
}
//判断是不是空每个元素都要判断 ,所以传入一个变量 obj 每次传入不同的 表单元素进行判断
function checkNull(obj) {
var a= document.getElementById(obj).value;
var reg =/^\s*$/; //一个活多个空白
//正者表达里有test() 方法;
if(reg.test(a)) {
//做一个拼接即可的到所有的span 元素"<font color='red'>"++"不能为空</font>";document.getElementById(obj).previousSibling.nodeValue 是上一个元素的值 他是文本
document.getElementById(obj+"_msg").innerHTML="<font color='red'> "+document.getElementById(obj).previousSibling.nodeValue+"不为空</font>";
return false;
}
return true;
}
function checkEm() {
var a= document.getElementById("eamil").value;
var reg = /^(\w)+@(\w)+(\.\w+)+$/;
if(reg.test(a)){
return true;
}
document.getElementById("eamil_msg").innerHTML="gun";
return false;
}
function checkLength(e){
var a= document.getElementById("eamil").value;
var reg = /^(\w){6,}$/;
if(reg.test(a)){
return true;
}
document.getElementById(e+"_msg").innerHTML="<font color='red'> "+document.getElementById(e).previousSibling.nodeValue+"长度不对</font>";
return false;
}
function checkpasswrod() {
if(document.getElementById("repassword").value!=document.getElementById("password").value){
document.getElementById("repassword_msg").innerHTML="<font color='red'> "+document.getElementById("repassword").previousSibling.nodeValue+"密码不同</font>";
return false;
}
return true;
}
</script>
</head>
<body>
<form action="#" method="post" οnsubmit="return check1()">
邮箱<input type="text" id="eamil" name="eamil" /><span id="eamil_msg"></span><br>
用户名 <input type="text" id="username" name="username" /><span
id="username_msg"></span><br> 密码<input type="password"
id="password" name="password" /><span id="password_msg"></span><br>
重复密码<input type="password" id="repassword" name="repassword" /><span
id="repassword_msg"></span><br> <input type="submit" value="提交"
id="submit" name="submit" />
</form>
</body>
</html>
