大家好，下面我来介绍一下我最喜欢的JavaScript交互效果是表单验证
1、可判断用户是否已填写表单中的必填项目。
2、可判断用户输入的邮件地址是否合法。
3、可判断用户是否已输入合法的日期。
4、可判断用户是否在数据域(numeric field)中输入了文本。
代码来自于https://www.jq22.com/jquery-info1979
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta charset="utf-8"/>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="contact">
<form name="form1" method="post">
<ul>
<li>
<label>姓名：</label>
<input type="text" name="yourname" placeholder="请输入用户名" οnblur="checkna()" required/><span class="tips"
id="divname">长度1~12个字符</span>
</li>
<li>
<label>密码：</label>
<input type="password" name="yourpass" placeholder="请输入你的密码" οnblur="checkpsd1()" required/><span
class="tips" id="divpassword1">密码必须由字母和数字组成</span>
</li>
<li>
<label>确认密码：</label>
<input type="password" name="yourpass2" placeholder="请再次输入你的密码" οnblur="checkpsd2()" required/><span
class="tips" id="divpassword2">两次密码需要相同</span>
</li>
<li>
<label>电子邮箱：</label>
<input type="text" name="youremail" placeholder="请输入你的邮箱" οnblur="checkmail()" required/><span
class="tips" id="divmail"></span>
</li>
</ul>
<b class="btn"><input type="submit" value="提交"/>
<input type="reset" value="取消"/></b>
</form>
</div>
</body>
</html>