描述：
1、首先输入框默认显示手机号，下面提示：请输入你的手机号
2、光标放上去的时候开始填写，填写完毕后（那么就要先提取鼠标失去光标这个事件）如果手机号码不正确：
文本框变红，并且下方用红字提示：请填写正确的手机号码
如果输入的手机号码正确：
文本框属性不发生变化
问题：怎么判断输入的手机号码是否复合要求？？？
未写完？？
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.yanz {color: gray;font-size: 12px}</style>
</head><body><table><tr><td>管理员手机号</td><td class="hd"><select name="" id=""><option value="+86">中国大陆 +86</option></select></td><td class="hd"><input type="text" value="手机号码"></td></tr><tr><td></td><td class="yanz">请输入你的手机号码</td></tr></table><script>var input = document.querySelector('input')var men = document.querySelector('.yanz')input.onfocus = function() {if (input.value == '手机号码') {input.value = ''}}input.onblur = function() {if (input.value == '') {input.value = '手机号码'input.style.border = '1px solid red'men.innerHTML = '请输入正确的手机号码'men.style.color = 'red'}}</script>
</body></html>输入密码验证提示信息：
样式复杂化
<style>.box {width: 600px;height: 100px;margin: 0 auto}.tu {width: 20px;height: 20px;line-height: 100px;}.tu img {width: 100%;line-height: 100px;vertical-align: text-bottom;}.inp {width: 320px;height: 30px;float: left}input {width: 300px;height: 30px;line-height: 100px;}.inp,.tu {float: left;line-height: 100px;}.ment {float: left;padding-left: 10px;line-height: 100px;}</style><body><div class="box"><div class="inp"> <input type="text"></div><div class="tu"><img src="感叹号.png" alt=""></div><div class='ment'>请输入6~16位密码</div></div></body> 
通过多类名的方式修改样式；真正的表单验证是通过正则表达式来的
<style>.register {width: 600px;margin: 100px auto}.message {display: inline-block;font-size: 12px;color: #999;padding-left: 20px}.tu {width: 20px;height: 20px;float: left;position: relative;}img {width: 100%;position: absolute;top: 15px}.wrong {color: red}p {display: inline-block;width: 300px;margin-left: 10px;color: black;font-size: 15px;}.right {color: blue}</style><div class="register"><input type="password" class="'ipt"><div class="message"><div class="tu"><img src="感叹号.png" alt=""></div><p>请输入6~16位密码</p></div></div><script>//首先判断事件是否失去焦点 onblur//如果输入正确则提示正确的信息颜色为绿色 小图标变化//如果输入不是6-16位密码，则提示错误信息为红色 小图标变化//因为样式变化较多，用className修改样式//获取元素var ipt = document.querySelector('input')var message = document.querySelector('.message')var img = document.querySelector('img')var p = document.querySelector('p')//失去焦点ipt.onblur = function() {//根据表单里面值的长度if (ipt.value.length < 6 || ipt.value.length > 16) {//要保留原来的效果，不能直接写wrongp.innerHTML = '你输入的位数不对，要求6~16位'p.className = 'p wrong'img.src = "错误.png"} else {p.innerHTML = '输入正确'p.className = 'p right'img.src = "感叹号.png"}}</script>
