标签：function style return 验证 color innerHTML 表单 HTML5 var
type的属性值: 功能
date 生成一个日期选择器
email 生成一个E-mail输入框
url 生成一个URL输入框
number 生成一个只能输入数字的文本框
2.HTML5新增的客户端校验属性:
HTML 5为表单控件新增了如下几个校验属性（取代JS的具体体现）
required属性：指定表单控件的内容不能为空。
pattern属性：指定表单控件的值必须符合指定的正则表达式。值为一个合法的正则表达式。正则表达式中的斜杠不写
pattern=“^\d{3}-\d{7}$”
min、max、step属性：只对数值类型、日期类型的<input>元素有效，它们控制表单控件的值在min-max之间，符合step步长。
每次增加的数值就是所谓的步长
placeholder属性：
为单行文本框、多行文本框等显示提示信息。
属性值就是提示信息。
属性值以默认的灰色字体显示在表单的控件当中 -->
<table>
<h3>HTML5客户端验证</h3>
<form>
<tr>
<td>图书名称：</td>
<td><input type="text" id="name" placeholder="图书名称必须输入！" required /></td>
</tr>
<tr>
<td>图书ISBN：</td>
<td><input type="text" id="isbn" placeholder="格式：123-1-123-12345" required
pattern="\d{3}-\d-\d{3}-\d{5}" /></td>
</tr>
<tr>
<td>图书价格：</td>
<td><input type="number" id="price" min="20" max="150" step="5" /></td>
</tr>
<tr>
<td>作者邮箱：</td>
<td><input type="email" id="mail" placeholder="请输入邮箱地址！" /></td>
</tr>
<tr>
<td>图书详情：</td>
<td><input type="url" id="url" placeholder="请输入URL路径！" /></td>
</tr>
<tr>
<td><button type="submit">提交</button></td>
</tr>
</form>
</table>
<body>
<table>
<p>用户注册信息</p>
<form action="" id="userrag" method="post" onsubmit="return check();">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username" onblur="checkUser();" onfocus="clearUser();"></td>
<td id="usrerror">*以英文开头，4~16个英文、数字或下划线字符！</td>
</tr>
<tr>
<td>电子邮箱:</td>
<td><input type="text" id="mail" onblur="checkMail();" onfocus="clearMail();"></td>
<td id="mailerror">*</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd" onblur="checkPwd();" onfocus="clearPwd();"></td>
<td id="pwderror">*英文字母、数字、下划线，且长度在6~24个字符！</td>
</tr>
<tr>
<td>重复密码：</td>
<td><input type="password" id="repwd" onblur="checkRepwd();" onfocus="clearRepwd();"></td>
<td id="repwderror">*</td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" id="huname" onblur="checkHu();" onfocus="clearHu();"></td>
<td id="huerror"></td>
</tr>
<tr>
<td>联系电话：</td>
<td><input type="text" id="pohname" onblur="checkPoh();" onfocus="clearPoh();"></td>
<td id="poherror"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"> <input type="reset"
value="重置"></td>
<td></td>
</tr>
</table>
</form>
</table>
<script>
//1.鼠标离开时用户名的检验 和 获得光标恢复用户名的初识状态
var username = document.getElementById("username");//获取表单元素
var usrerror = document.getElementById("usrerror");//获取提示信息的元素
function checkUser() {
var renull = /^\s*$/;// 对于\s匹配一个空白字符
var reguise = /^[a-zA-Z]\w{3,15}$/;
//对于[a-zA-Z]匹配一个英文字符 ，保证了以英文开头
// 对于\w 等价模式:[A-Za-z0-9] 匹配的内容:一个单字字符(包括英文，数字)
//对于{3,15}，就是前面的单字符可以出现3 到15 个，加上前面的一个英文字符，符合题目要求的4~16个字符
if (renull.test(username.value)) {
usrerror.style.color = "red";
usrerror.innerHTML = "*用户名不能为空";
return false;
}
else if (reguise.test(username.value)) {
usrerror.style.color = "black";
usrerror.innerHTML = "*以英文开头，4~16个英文、数字或下划线字符！";
return true;
}
else {
usrerror.style.color = "red";
usrerror.innerHTML = "*只能以英文开头，4~16个英文、数字或下划线字符！";
return false;
}
}
function clearUser() {
usrerror.style.color = "black";
usrerror.innerHTML = "*";
}
//2.鼠标离开时密码的检验 和 获得光标恢复密码框的初识状态
var pwd = document.getElementById("pwd");
var pwderror = document.getElementById("pwderror");
function checkPwd() {
var renull = /^\s*$/;
var reguise = /^\w{6,24}$/;
if (renull.test(pwd.value)) {
pwderror.style.color = "red";
pwderror.innerHTML = "*密码不能为空";
return false;
}
else if (reguise.test(pwd.value)) {
pwderror.style.color = "black";
pwderror.innerHTML = "*英文字母、数字、下划线，且长度在6~24个字符！";
return true;
}
else {
pwderror.style.color = "red";
pwderror.innerHTML = "*必须为英文字母、数字、下划线，且长度在6~24个字符！";
return false;
}
}
function clearPwd() {
pwderrorr.style.color = "black";
pwderrorr.innerHTML = "*";
}
//3.鼠标离开时对”重复密码“的检验 和 获得光标恢复”重复密码“的初识状态
var repwd = document.getElementById("repwd");
var repwderro = document.getElementById("repwderror");
function checkRepwd() {
var renull = /^\s*$/;
if (renull.test(repwd.value)) {
repwderro.style.color = "red";
repwderro.innerHTML = "*重复密码不能为空！";
return false;
}
else if (pwd.value == repwd.value) {
repwderro.style.color = "black";
repwderro.innerHTML = "*";
return true;
}
else {
repwderro.style.color = "red";
repwderro.innerHTML = "*两次密码输入不一致！";
return false;
}
}
function clearRepwd() {
repwderror.style.color = "black";
repwderror.innerHTML = "*";
}
//4.鼠标离开时对”电子邮箱 “的检验 和 获得光标恢复”电子邮箱 “的初识状态
var mail = document.getElementById("mail");
var mailerror = document.getElementById("mailerror");
function checkMail() {
var renull = /^\s*$/;
var reguise = /^\d{10}@qq.com$/;
if (renull.test(mail.value)) {
mailerror.style.color = "red";
mailerror.innerHTML = "*电子邮箱不能为空";
return false;
}
else if (reguise.test(mail.value)) {
mailerror.style.color = "black";
mailerror.innerHTML = "*";
return true;
}
else {
mailerror.style.color = "red";
mailerror.innerHTML = "*电子邮箱格式不正确！";
return false;
}
}
function clearMail() {
mailerror.style.color = "black";
mailerror.innerHTML = "*";
}
//5.鼠标离开时对”身份证号码 “的检验 和 获得光标恢复”身份证号码 “的初识状态
var huname = document.getElementById("huname");
var huerror = document.getElementById("huerror");
function checkHu() {
var renull = /^\s*$/;
var reguise = /^\d{6}([12][09]\d{2})([01]\d)([0123]\d)\d{4}$/;
if (renull.test(huname.value)) {
huerror.style.color = "red";
huerror.innerHTML = "*身份证号码不能为空";
return false;
}
else if (reguise.test(huname.value)) {
huerror.style.color = "black";
huerror.innerHTML = "*";
return true;
}
else {
huerror.style.color = "red";
huerror.innerHTML = "*身份证号码格式不正确！";
return false;
}
}
function clearHu() {
huerror.style.color = "black";
huerror.innerHTML = "*";
}
//6.鼠标离开时对”联系电话 “的检验 和 获得光标恢复” 联系电话“的初识状态
var pohname = document.getElementById("pohname");
var poherror = document.getElementById("poherror");
function checkPoh() {
var renull = /^\s*$/;
var reguise = /^\d{6,11}$/;
if (renull.test(pohname.value)) {
poherror.style.color = "red";
poherror.innerHTML = "*电话号码不能为空";
return false;
}
else if (reguise.test(pohname.value)) {
poherror.style.color = "black";
poherror.innerHTML = "*";
return true;
}
else {
poherror.style.color = "red";
poherror.innerHTML = "*电话号码格式不正确！";
return false;
}
}
function clearPoh() {
poherror.style.color = "black";
poherror.innerHTML = "*";
}
//最终提交时，进行总的判断，用到了短路原理，有一个不正确，就会弹出警示框
function check() {
if (checkUser() && checkPwd() && checkRepwd() && checkHu() && checkMail() && checkPoh()) {
return true;
}
else {
alert("你输入的信息不符合规则！");
return false;
}
}
//分析：提交后，页面重新加载，初识值已经是修改后的值了，并不是reset不起作用了
// var btn = document.getElementById("btn");
// function clear() {
// return clearHu() && clearMail() && clearPoh() && clearPwd() && clearRepwd() && clearUser();
// }
// btn.addEventListener("click", clear);
</script>
标签：function,style,return,验证,color,innerHTML,表单,HTML5,var 来源： https://www.cnblogs.com/yang123-456/p/15690941.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。