开始时间:20210419
正则表达式
创建正则表达式对象
第一种创建方式:
var regExp =/正则表达式/flags;
第二种创建方式:使用内置支持类RegExp
var regExp = new RegExp(“正则表达式”, “flags” );
关于flags:
g:全局匹配i,忽略大小写
m:多行搜索(Es规范制定之后才支持m。)
当前面是正则表达式的时候,m不能用。只有前面是普通字符串的时候,m才可以使用。
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
</head>
<body>
<script>
window.onload=function(){
//给按钮绑定
document.getElementById('btn').onclick=function(){
var email=document.getElementById("email").value;
//输入正则表达式
var emailRegExp=/^\w+([-+. ]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//测试正则表达式
var ok=emailRegExp.test(email);
if(!ok){
document.getElementById("emailError").innerText="邮箱地址不合法";
}else{
document.getElementById("emailError").innerText="邮箱地址合法";
}
}
//给按钮获得焦点,在email框框中点了那么一下,则让emailError显示空串
document.getElementById("email").onfocus=function(){
document.getElementById("emailError").innerText="";
}
}
</script>
<input type="text" id="email"/>
<!--设置报错的格式-->
<span id="emailError" style="color: red;font-size: 12px;"></span>
<input type="button" value="验证邮箱" id="btn"/>
</body>
</html>
Trim函数
其实在VBA中我们就学过这个函数了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
//低版本的IE浏览器不支持字符串的trim()函数,怎么办?
//可以自己对string类扩展一个全新的trim()函数!
//这里不存在重载,直接是覆盖
String.prototype.trim= function(){
//alert("扩展之后的trim方法");
//去除违前字符串的前后空白
//在当前的方法中的this代表的就是当前字符串.
//先去除前半空白,再去除后半空白
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
window.onload = function(){
document.getElementById("btn").onclick = function(){
//获取用户名
var username = document.getElementById("username").value;//去除前后空白
username = username.trim() ;//测试
alert("--->" + username + "<----");
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="获取用户名" id="btn"/>
</body>
</html>
验证表单
判断用户名是否为空
window.onload=function(){
//给用户名文本框绑定blur事件
var usernameElt=document.getElementById("username");
//失去焦点
usernameElt.onblur=function(){
//获取用户名
var username=usernameElt.value;
username=username.trim();
//判断用户名是否为空
//因为之前去掉空白了,所以还是判断长度比较靠谱
var usernameErrorSpan=document.getElementById("usernameError");
if(username.length===0){
//报错需要用到span,所以我们要在这上面获取span对象
usernameErrorSpan.innerText="用户名不能为空"
}
}
}
进一步想,需要触发一个focus事件
就是当我的鼠标点回用户名时,如果之前的值有问题
可以清空里面的value,或者是将空格清空
如果之前输入合法,那么就保持他即可
那么怎么判断呢,就看后面红字提示是否为空,不为空则是出错的结果,需要清空
这个过程我们又需要获取usernameErrorSpan
所以把他提出函数体之外
window.onload=function(){
var usernameErrorSpan=document.getElementById("usernameError");
//给用户名文本框绑定blur事件
var usernameElt=document.getElementById("username");
//失去焦点
usernameElt.onblur=function(){
//获取用户名
var username=usernameElt.value;
username=username.trim();
//判断用户名是否为空
//因为之前去掉空白了,所以还是判断长度比较靠谱
if(username.length===0){
//报错需要用到span,所以我们要在这上面获取span对象
usernameErrorSpan.innerText="用户名不能为空";
}
}
//给username文本框绑定焦点事件
//即点击文本框时,光标能出现在左侧,便于输入
usernameElt.onfocus=function(){
//清空span
if(usernameErrorSpan.innerText!=""){
usernameElt.value="";
}
usernameErrorSpan.innerText="";
//清空非法的value,不合法就清空
}
}
判断用户名是否合法,添加了判断长度,判断非法字符
var username=usernameElt.value;
username=username.trim();
//判断用户名是否为空
//因为之前去掉空白了,所以还是判断长度比较靠谱
if(username.length===0){
//报错需要用到span,所以我们要在这上面获取span对象
usernameErrorSpan.innerText="用户名不能为空";
}else if(username.length<6||username.length>14){
//用户名长度非法
usernameErrorSpan.innerText="用户名长度必须在6~14之间";
}
else{
//用户名长度合法
//判断是否含有特殊符号
var regExp=/^[A-Za-z0-9]+$/;
var ok=regExp.test(username);
if(ok){
//用户名合法
}
else{
//用户名含有特殊符号
usernameErrorSpan.innerText="用户名长度必须是数字和字母";
}
}
同理,写判断 确认密码
//获取密码错误提示
var pwdErrorSpan=document.getElementById("pwdError");
//获取确认密码框对象
var userpwd2Elt=document.getElementById("userpwd2");
userpwd2Elt.onblur=function(){
//获取密码
var userpwdElt=document.getElementById("userpwd");
var userpwd=userpwdElt.value;
var userpwd2=userpwd2Elt.value;
if(userpwd!=userpwd2){
pwdErrorSpan.innerText="密码不一致";
}
else{
pwdFlag=true;
}
}
userpwd2Elt.onfocus=function(){
if(pwdErrorSpan.innerText!=""){
}
pwdErrorSpan.innerText="";
}
给email也做一个判断
//给email绑定blur事件
var emailElt=document.getElementById("email");
//获取email的span
var emailSpan=document.getElementById("emailError");
emailElt.onblur=function(){
//获取email
var email=emailElt.value;
//编写email的正则
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([--]\w+)*$/
var ok=emailRegExp.test(email);
if(ok){
emailFlag=true;
}else{
//邮箱格式不正确
emailSpan.innerText="邮箱格式不正确";
}
}
//绑定focus事件
emailElt.onfocus=function(){
if(emailSpan.innerText!=""){
emailElt.value="";
}
emailSpan.innerText="";
}
然后我们进一步要想
如果需要提交,必须等到所有判断都没问题才能提交
因此我们最好把提交本身按钮设置为一个button
等判断都没问题后,再直接用js实现submit
但我们判断时,还要添加一个focus 和blur触发事件,因为如果你没有触发,spanError肯定也不会报错
所以一定要先触发,再判断
//给提交按钮绑定鼠标单击事件
var submitElt=document.getElementById("submitBtn");
//当所有表单验证通过,方可提交
submitElt.onclick=function(){
//需要先判断是否所有的Span都为空,且所有的blur都被触发过(不然刚开始初始化时Span也为空,但那个时候不能提交)
//用代码实现触发事件 username userpwd2 email 的blur
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//判断上面三个的Span是否为空,为空则可以提交
if(usernameFlag && pwdFlag && emailFlag){
var userFormElt=document.getElementById("userForm");
userFormElt.submit();
}
}
这样写完,大体的判断就可以做了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var usernameErrorSpan=document.getElementById("usernameError");
var usernameFlag=false;
var pwdFlag=false;
var emailFlag=false;
//给用户名文本框绑定blur事件
var usernameElt=document.getElementById("username");
//失去焦点
usernameElt.onblur=function(){
//获取用户名
var username=usernameElt.value;
username=username.trim();
//判断用户名是否为空
//因为之前去掉空白了,所以还是判断长度比较靠谱
if(username.length===0){
//报错需要用到span,所以我们要在这上面获取span对象
usernameErrorSpan.innerText="用户名不能为空";
}else if(username.length<6||username.length>14){
//用户名长度非法
usernameErrorSpan.innerText="用户名长度必须在6~14之间";
}
else{
//用户名长度合法
//判断是否含有特殊符号
var regExp=/^[A-Za-z0-9]+$/;
var ok=regExp.test(username);
if(ok){
//用户名合法
usernameFlag=true;
}
else{
//用户名含有特殊符号
usernameErrorSpan.innerText="用户名长度必须是数字和字母";
}
}
}
//给username文本框绑定焦点事件
//即点击文本框时,光标能出现在左侧,便于输入
usernameElt.onfocus=function(){
//清空span
if(usernameErrorSpan.innerText!=""){
usernameElt.value="";
}
usernameErrorSpan.innerText="";
//清空非法的value,不合法就清空
}
//获取密码错误提示
var pwdErrorSpan=document.getElementById("pwdError");
//获取确认密码框对象
var userpwd2Elt=document.getElementById("userpwd2");
userpwd2Elt.onblur=function(){
//获取密码
var userpwdElt=document.getElementById("userpwd");
var userpwd=userpwdElt.value;
var userpwd2=userpwd2Elt.value;
if(userpwd!=userpwd2){
pwdErrorSpan.innerText="密码不一致";
}
else{
pwdFlag=true;
}
}
userpwd2Elt.onfocus=function(){
if(pwdErrorSpan.innerText!=""){
userpwd2Elt.value="";
}
pwdErrorSpan.innerText="";
}
//给email绑定blur事件
var emailElt=document.getElementById("email");
//获取email的span
var emailSpan=document.getElementById("emailError");
emailElt.onblur=function(){
//获取email
var email=emailElt.value;
//编写email的正则
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([--]\w+)*$/
var ok=emailRegExp.test(email);
if(ok){
emailFlag=true;
}else{
//邮箱格式不正确
emailSpan.innerText="邮箱格式不正确";
}
}
//绑定focus事件
emailElt.onfocus=function(){
if(emailSpan.innerText!=""){
emailElt.value="";
}
emailSpan.innerText="";
}
//给提交按钮绑定鼠标单击事件
var submitElt=document.getElementById("submitBtn");
//当所有表单验证通过,方可提交
submitElt.onclick=function(){
//需要先判断是否所有的Span都为空,且所有的blur都被触发过(不然刚开始初始化时Span也为空,但那个时候不能提交)
//用代码实现触发事件 username userpwd2 email 的blur
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//判断上面三个的Span是否为空,为空则可以提交
if(usernameFlag && pwdFlag && emailFlag){
var userFormElt=document.getElementById("userForm");
userFormElt.submit();
}
}
}
</script>
<!--表单提交用post,这为了演示传过去的参数是否正确,用的是get-->
<form id="userForm" action="http://localhost:8080/jd/save" method="get">
用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
密码<input type="text" name="userpwd" id="userpwd"/><br>
确认密码<input type="text" id="userpwd2"/><span id="pwdError"></span><br>
邮箱<input type="text" name="email" id="email"/><span id="emailError"></span><br>
<input type="button" value="注册" id="submitBtn"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
结束时间:20210531