1.表单校验种类(重点)
1.对用户名进行判空
2.密码长度必须大于等于6个字符
3.邮箱必须包含@特殊字符
4.姓名中不能包含数字
举例：
<!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>表单校验种类(重点)</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function check(){
//1.对用户名进行判空
var name = $("input[name=name]").val().trim();
if(name==""){
alert("用户名不能为空");
return false;
}
//注意有空格也不正确 加个trim()消除空格
//$.trim() 函数用于去除字符串两端的空白字符。
//$.trim() 函数将在 jQuery 3.5 及以上版本废弃，
//可以使用 JavaScript 原生的 String.prototype.trim 代替。
//2.密码长度必须大于等于6个字符
var password = $("input[name=password]").val().trim();
if(password.length<6){
alert("密码长度必须大于等于6个字符");
return false;
}
//3.邮箱必须包含@特殊字符
var email = $("input[name=email]").val();
if(email.indexOf("@")==-1){
alert("邮箱必须包含@特殊字符");
return false;
}
//JavaScript indexOf() 方法
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//如果没有找到匹配的字符串则返回 -1。
//注意： indexOf() 方法区分大小写。
//4.姓名中不能包含数字
for(var i=0;i<name.length;i++){
var j = name.substring(i,i+1);//左闭右开
if(isNaN(j)==false){
alert("姓名中不能包含数字");
return false;
}
}
return true;
}
$(function(){
$("#myform").submit(function(){
return check();
});
});
</script>
</head>
<body>
<form id="myform" action="demo01_success.html">
<table border="1" align="center">
<tr><td>用户名</td>
<td><input type="text" name="name"/></td>
</tr>
<tr><td>密码</td>
<td><input type="text" name="password"/></td>
</tr>
<tr><td>邮箱</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td><input type="submit" value="提交"/></td>
<td><input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
======================
demo01_success.html：123
当你不写用户名，就会弹窗 用户名不能为空。
当你密码长度不够，就会弹窗 密码长度必须大于等于6个字符
当你邮箱不写@，就会弹窗 邮箱必须包含@特殊字符
当你姓名中包含数字，就会弹窗姓名中不能包含数字
jQuery submit() 方法
定义和用法
当提交表单时，会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
2.焦点和文本框
1.blur()
定义： 从文本域中移开焦点
2.focus()
定义： 从文本域中设置焦点
3.select()
定义： 选取文本域中的内容,突出显示输入区域的内容
案例：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
$(function(){
123 /*
$("#myinput").blur(function(){
$(this).css("background","red");
});
$("#myinput").focus(function(){
$(this).css("background","yellow");
});
$("#myinput").select(function(){
$(this).css("background","blue");
});*/
});
</script>
<body><input type="text" value="" id="myinput" /></body>
点击文本框，变成黄色，松开变成红,
如果里面有内容并选中，就变成蓝色。
之后就一直是红色了。
3.正则表达式
(1)基本语法结构：（又称规则表达式）
正则表达式(regular expression)
描述了一种字符串匹配的模式（pattern），
可以用来检查一个串是否含有某种子串、
将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
var reg = /表达式/附加参数
例如：var reg = /123/; var reg = /123/g;
附注：
i: 执行对大小写不敏感的匹配
g: 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止
(2)常用方法：
exec() 检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test() 检索字符串中指定的值，返回true或false
案例1- 参数g：(没有$可以不用引入jQuery)
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
/*第一种:无参数g的案例*/
var regx=/user\d/;
var str="user18duser2dsc";
var rs=regx.exec(str);//此时rs的值为{user1}
var rs2=regx.exec(str);//此时rs的值依然是{user1}
document.write("rs:"+rs+"---rs2:"+rs2);
/*第二种:有参数g的案例*/
var regx=/user\d/g;
var str="user18duser2dsc";
var rs=regx.exec(str);//此时rs的值为{user1}
var rs2=regx.exec(str);//此时rs的值是{user2}
document.write("rs:"+rs+"---rs2:"+rs2);
</script>
rs:user1—rs2:user1 rs:user1—rs2:user2
案例2- 参数i：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
// 第一种无参数i
var regx=/abc/;
var str = "ABC";
var str2 = "abc";
var flag = regx.test(str);
document.write(flag);
//flase
var flag2 = regx.test(str2);
document.write(flag+" "+flag2);
//flase true
// 第二种有参数i
var regx=/abc/i;
// ==》转换为ABC 下面的字符串是不会变得
var str = "ABC";
var str2 = "abc";
var flag = regx.test(str);
document.write(flag);
//true
var flag2 = regx.test(str2);
document.write(flag+" "+flag2);
//true true
</script>
<body></body>
案例3 -常用写法：(企业专用)
例 如：/^\d{6}$/
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function checkEmail(){
var reg = /^\d{6}$/;
var email = $("#email").val();
if(reg.test(email) == false){
alert("请输入6位数字");
return false;
}
}
</script>
<body>
邮编:<input id="email" type="text" onblur="checkEmail()"/>
<div id="tip"></div>
</body>
</html>
<!-- onblur是失去焦点 HTML onblur 事件属性
4.表单选择器
(1):image
定义：匹配所有图像域
(2):input
定义：匹配所有input、textarea、select和button 元素
案例：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
$(function(){
//$(":image").css("background","red");
//$(":input").css("background","red");
alert($("select option:selected").val());//22
// val()值获取的是value值
alert($("select option:selected").text());//2
// text()才是获得文本值
});
</script>
<body>
<form>
<input type="text" /><br/>
<input type="checkbox" /><br/>
<input type="radio" /><br/>
<input type="image" /><br/>
<input type="file" /><br/>
<input type="submit" /><br/>
<input type="reset" /><br/>
<input type="password" /><br/>
<input type="button" /><br/>
<select>
<option id="1" value="1">1</option>
<option id="2" value="22" selected="selected">2</option>
</select><br/>
<textarea></textarea><br/>
<button></button><br/>
</form>
</body>
第二个的结果是
----2021.10.09&10.12
7575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
