<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
form {
width: 500px;
height: auto;
margin: 0 auto;
}
form fieldset {
padding: 20px 30px;
}
input {
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
display: none;
/*隐藏*/
}
span[class*="iconfont icon-"] { /*选中类名以icon-开头的元素*/
margin-left: 30px;
font-size: 20px;
color: #55a532;
/*隐藏*/
visibility: hidden;
}
</style>
</head>
<body>
<form action="" method="" name="myform">
<fieldset>
<!--#表单外框标题-->
<legend>学生档案</legend>
<!--label 标签起到点击文字自动聚焦的效果-->
<label for="userpasswd">姓名:</label>
<input type="text" name="username" id="username" autofocus>
<span class="iconfont icon-check-circle" id="name-icon"></span><br> <!--对勾-->
<p id="nametips">请输入2--6位字符</p>
密码:<input type="password" name="userpasswd" id="userpasswd">
<span class="iconfont icon-check-circle"></span><br>
<p id="passtips">6-16位数字或字母</p>
电话号: <input type="text" name="telnumber">
<span class="iconfont icon-check-circle"></span><br>
<p id="teltips">请输入11位数字</p>
邮箱: <input type="text" name="useremail"><br>
<p id="emailtips">请输入地球人能识别的邮箱</p>
身份证: <input type="text" name="userid"><br>
<p id="idtips">请输入合法身份证</p>
<input type="submit">
<input type="reset">
</fieldset>
</form>
<script src="获取元素.js"></script>
<script>
window.onload = function () {
//1获取表单元素 监听用户如若填写完毕 ---》离焦 ---》js判断是否符合规则
var form = document.myform;
var username = form.username //form.name 属性名 姓名对应元素
var telnumber = form.telnumber
//onblur 离焦 onfocus 聚焦
username.onblur = function () {
//获取用户输入的值进行验证
var userInput_name = username.value
var nameReg = /^[\u4e00-\u9fa5]{2,6}$/g //不加引号 表达式
console.log(userInput_name) //正则表达式匹配 如果test方法 返回true 则符合规定
//将p元素的文本改变成绿色的您的输入符合规则
//如果返回false 则p显示 文字变成红色
if(!nameReg.test(userInput_name)){ //不符合规则
my$('#nametips').style.display = 'block' //显示
my$('#nametips').style.color = 'red'
//切换图标类为X icon-close-circle
//将后边给前者，显示x 也就是用x代替class类
my$('#name-icon').setAttribute('class','iconfont icon-close-circle')
//控制页面控件是否显示的一个属性 此时显示
my$('#name-icon').style.visibility = 'visible'
//图标颜色此时为红色
my$('#name-icon').style.color = 'red'
return false;
}
else {
//此时区别前者，符合规则时 显示通过验证，并显示绿色
my$('#nametips').style.display = 'block' //显示
my$('#nametips').innerText = '通过验证'
my$('#nametips').style.color = 'green'
//√图标显示
my$('#name-icon').style.visibility = 'visible'
// 将后边给前者，显示√ 也就是用√代替class类
my$('#name-icon').setAttribute('class','iconfont icon-check-circle')
return true;
}
}
telnumber.onblur = function () {
var userInput_tel = telnumber.value
var telReg =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
//不加引号 表达式
//正则表达式匹配 如果test方法 返回true 则符合规定
//将p元素的文本改变成绿色的您的输入符合规则
//如果返回false 则p显示 文字变成红色
if(!telReg.test(userInput_tel)){ //不符合规则
my$('#teltips').style.display = 'block' //显示
my$('#teltips').style.color = 'red'
}
else {
my$('#teltips').style.display = 'block' //显示
my$('#teltips').innerText = '通过验证'
my$('#teltips').style.color = 'green'
}
}
}
</script>
</body>
</html>
/*获取元素 ---》 一个 */
function my$(selector ) {
/*判断？ # */
return document.querySelector(selector)
}
function my$All(selector ) {
/*判断？ # */
return document.querySelectorAll(selector)
}