- 如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果
- 校验规则：
- 每个英文字母、数字、英文符号长度为1
- 每个汉字，中文符号长度为2
- 表单获得焦点时，下方显示表单填写规则
- 表单失去焦点时校验表单内容
- 校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
- 校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
- 点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”
<!DOCTYPE html>
<html><head><title>表单校验</title><meta charset="UTF-8"><style type="text/css">* {font-family: '微软雅黑';}section {text-align: center;padding: 10px;margin: 10px;position: relative;height: 2em;}section label{position: absolute;right: 60%;top: 5px;}section input {width:200px;border:2px solid #666;border-radius: 5px;position: absolute;left: 43%;top: 5px;width: 250px;}section input:focus{border:2px solid lightblue;outline: none;}section span {position: absolute;left: 43%;bottom: 5px;font-size: 12px;color: gray;visibility: hidden;}input[type='button'] {width:250px;height:30px;background-color: rgb(47, 121, 186);border: none;border-radius: 5px;color: white;outline: none;}input[type='button']:hover{background-color: rgb(90, 144, 190);}</style>
</head><body><form><section><label for="text">名称</label><input type="text" id="name"><span>必填，长度为4-16个字符</span></section><section><label for="password">密码</label><input type="password" id="password"><span>6到16位数字和字母的组合</span></section><section><label for="password">确认密码</label><input type="password" id="confirm_password"><span>重复输入密码</span></section><section><label for="text">邮箱</label><input type="text" id="email"><span>example@123.com</span></section><section><label for="text">手机</label><input type="text" id="tel"><span>请输入11位手机号码</span></section><section><input type="button" value="提交" id="check"></section></form><script type="text/javascript">$ = function(el) {return document.querySelector(el);}$$ = function(el) {return document.querySelectorAll(el);}var checkResult = {right: false,tip: ''}var inputEles = [$('#name'), $('#password'), $('#confirm_password'), $('#email'), $('#tel')];var originTip = ['必填，长度为4-16个字符', '6到16位数字和字母的组合', '重复输入密码', 'example@123.com', '请输入11位手机号码'];function checkValue(ele) {var str = ele.value.trim();if (str.length === 0) {checkResult.right = false;checkResult.tip = '输入不能为空';return;}if (ele === inputEles[0]) {var len = str.replace(new RegExp('[^\x00-\xff]', 'g'), 'aa').length;if (len >= 4 && len <= 16) {checkResult.right = true;checkResult.tip = '名称可用';} else if(len<4){checkResult.right = false;checkResult.tip = '名称过短！';}else{checkResult.right = false;checkResult.tip = '名称过长！';}}if (ele === inputEles[1]) {if (str.match(/^[a-zA-Z0-9]{6,16}$/)) {checkResult.right = true;checkResult.tip = '密码格式正确';} else {checkResult.right = false;checkResult.tip = '请输入6到16位字符且只能为数字和字母';}}if (ele === inputEles[2]) {if (str === inputEles[1].value.trim()) {checkResult.right = true;checkResult.tip = '密码正确';} else {checkResult.right = false;checkResult.tip = '两次密码输入要相同';}}if (ele === inputEles[3]) {var reg = new RegExp('^([a-zA-Z0-9_\.\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$', 'i');if (str.match(reg)) {checkResult.right = true;checkResult.tip = '邮箱可用';} else {checkResult.right = false;checkResult.tip = '邮箱格式错误';}}if (ele === inputEles[4]) {if (str.match(/^1\d{10}$/)) {checkResult.right = true;checkResult.tip = '号码可用';} else {checkResult.right = false;checkResult.tip = '号码格式错误';}}}for (var i = 0; i < inputEles.length; i++) {inputEles[i].addEventListener('blur', function(e) {checkValue(e.target);var span = e.target.parentElement.getElementsByTagName('span')[0];span.innerHTML = checkResult.tip;if (checkResult.right) {e.target.style.border = '2px solid green';span.style.color = 'green';} else {e.target.style.border = '2px solid red';span.style.color = 'red';}})inputEles[i].addEventListener('focus', function(e) {var index = inputEles.indexOf(e.target);var span = e.target.parentElement.getElementsByTagName('span')[0];span.innerHTML = originTip[index];span.style.visibility = 'visible';span.style.color = 'gray';})}$('#check').addEventListener('click', function(e) {var right = true;for (var i = 0; i < inputEles.length; i++) {var input = inputEles[i];checkValue(input);var span = input.parentElement.getElementsByTagName('span')[0];span.style.visibility = 'visible';span.innerHTML = checkResult.tip;if (checkResult.right) {input.style.border = '2px solid green';span.style.color = 'green';} else {input.style.border = '2px solid red';span.style.color = 'red';right = false;}}if (right) {alert('提交成功');} else {alert('提交失败，请检查输入');}})</script>
</body></html>
复制代码
