学习内容
- 通过老师讲解学习表单验证实例,加深对 JS 基础语法部分理解;
今天学习的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<span style="color:red">*</span> 用户名:<input type="text" id="username" name=""> <span id="usernameError" style="color:red"></span><br/>
QQ:<input type="text" id="qq" name=""> <span id="qqError" style="color:red"></span><br/>
联系电话:<input type="text" id="tel" name=""> <span id="telError" style="color:red"></span><br/>
<input type="button" onclick="formReg();" name="" value="提交"><span id="resultSpan"></span>
</form>
<script type="text/javascript">
var formReg = function() {
var flag = true;
var errorMsg = "";
var username = document.getElementById("username").value;
var qq = document.getElementById("qq").value;
var tel = document.getElementById("tel").value;
if (username.trim() == "" || username.trim().length > 6) {
flag = false;
document.getElementById("usernameError").innerHTML = "用户名为空或者字符超过6个";
} else {
document.getElementById("usernameError").innerHTML = "";
}
if (qq.trim() != "" && isNaN(qq)) {
flag = false;
errorMsg += "QQ号必须为数字|";
}
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (tel.trim() != "" && !myreg.test(tel)) {
flag = false;
errorMsg += "手机号不合法|";
}
if (flag) {
document.getElementById("resultSpan").innerHTML = "验证成功";
document.getElementById("resultSpan").style.color = "green";
} else {
document.getElementById("resultSpan").innerHTML = "验证失败";
document.getElementById("resultSpan").style.color = "red";
}
}
</script>
</body>
</html>
学习总结
- 今日学习了表单验证的代码,进过一下午的反复敲击,对这段代码大概有所了解。但是还是要多加练习才行。