JavaScript 表单验证及基础知识

王真教掌门

于 2022-03-07 12:21:06 发布

阅读量510

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/WZJ278/article/details/123326610

版权

JavaScript正则的基础知识

完成简单的基础验证

表单正则的验证方式及JavaScript的二级联动

JavaScript正则的基础知识

正则表达式是由普通字符（如英文字母）以及特殊字符（也称为元字符）组成的文字模式。该模式对文本查找时需要匹配的一个或多个字符串描述，给出一个匹配模板。

为什么使用正则：因为正则表达式可以大大简化文本识别工作，从而提高代码效率

JavaScript的正则写法：正则表达式：/^ 代码 $/ （必须是 /^开头，$/ 结尾）

//定义正则
    var r1=/^\w{6,10}$/

正则的一些基本单词含义：

符号	含义	示例	解释	匹配输入
\	转义符	\*	符号“*”	*
[ ]	可接收的字符列表	[efgh]	e、f、g、h中的任意1个字符	e、f、g、h
[^ ]	不接收的字符列表	[^abc]	除a、b、c之外的任意1个字符，包括数字和特殊符号	m、q、5、*
\|	匹配“\|”之前或之后的表达式	ab\|cd	ab或者cd	ab、cd
( )	将子表达式分组	(abc)	将字符串abc作为一组	abc
-	连字符	A-Z	任意单个大写字母	大写字母

正则的一些限定符号：

符号	含义	示例	解释	匹配输入	不匹配输入
*	指定字符重复0次或n次	(abc)*	仅包含任意个abc的字符串，等效于\w*	abc、abcabcabc	a、abca
+	指定字符重复1次或n次	m+(abc)*	以至少1个m开头，后接任意个abc的字符串	m、mabc、mabcabc	ma、abc
？	指定字符重复0次或1次	m+abc?	以至少1个m开头，后接ab或abc的字符串	mab、mabc、mmmab、mmabc	ab、abc、mabcc
{n}	只能输入n个字符	[abcd]{3}	由abcd中字母组成的任意长度为3的字符串	abc、dbc、adc	a、aa、dcbd

符号	含义	示例	解释	匹配输入	不匹配输入
{n,}	指定至少 n 个匹配	[abcd]{3,}	由abcd中字母组成的任意长度不小于3的字符串	aab、dbc、aaabdc	a、cd、bb
{n,m}	指定至少 n 个但不多于 m 个匹配	[abcd]{3,5}	由abcd中字母组成的任意长度不小于3，不大于5的字符串	abc、abcd、aaaaa、bcdab	ab、ababab、a
^	指定起始字符	^[0-9]+[a-z]*	以至少1个数字开头，后接任意个小写字母的字符串	123、6aa、555edf	abc、aaa、a33
$	指定结束字符	^[0-9]\-[a-z]+$	以1个数字开头后接连字符“–”，并以至少1个小写字母结尾的字符串	2-a、3-ddd、5-efg	33a、8-、7-Ab

符号	含义	示例	解释	匹配输入	不匹配输入
.	匹配除 \n 以外的任何字符	a..b	以a开头，b结尾，中间包括2个任意字符的长度为4的字符串	aaab、aefb、a35b、a#*b	ab、aaaa、a347b
\d	匹配单个数字字符，相当于[0-9]	\d{3}(\d)?	包含3个或4个数字的字符串	123、9876	12、01023
\D	匹配单个非数字字符，相当于[^0-9]	\D(\d)*	以单个非数字字符开头，后接任意个数字字符串	a、A342	aa、AA78、1234
\w	匹配单个数字、大小写字母字符，相当于[0-9a-zA-Z ]	\d{3}\w{4}	以3个数字字符开头的长度为7的数字字母字符串	234abcd、12345Pe	58a、Ra46
\W	匹配单个非数字、大小写字母字符，相当于[^0-9a-zA-Z ]	\W+\d{2}	以至少1个非数字字母字符开头，2个数字字符结尾的字符串	#29、#?@10	23、#?@100

完成简单的基础验证

表单的基础的账号密码验证方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" id="myFoa">
             <!-- 密码 账号 给他们都设置了键盘松开事件-->
			<p>密码 <input type="text" id="pwd" onkeyup="cbx(this)"/><span ><i class="123"></i></span></p>
			<p>账号 <input type="text" id="zz" onkeyup="cbx(this)"/><span ><i class="123"></i></span></p>
			<p><button>登录</button></p>   <!-- 密码 账号 登录按钮-->
		</form>
		<script type="text/javascript">
			function cbx(bs){//键盘松开事件通过传入的对象拿到内容的长度进行判定 并在后面进行输入提示
				var leng=bs.value.length;
				var labe=bs.parentElement.getElementsByClassName("123")[0];//通过父元素拿到里面class并给内容赋值
				if(leng>0){
					if(leng>2&&leng<7){
						labe.textContent="正确"
						return true
					}
					labe.textContent="长度在3-6之间"
					return false
				}
				labe.textContent="长度大于0"
				return false
			}
			//添加提交事件(会具备返回值)
			myFoa.onsubmit = () => {
                    //提交事件返回true和false阻止提交
						var f1 = cbx(zz)
				        var f2 = cbx(pwd)
				        return f1 && f2
			}
		</script>
	</body>
</html>

运行结果：

提示

内容超出限制提示

这就是简单基础的表单验证

表单正则的验证方式及JavaScript的二级联动

账号密码及邮箱和地址联动的基本注册验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>

<form action="" id="myForm">
    <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
    <p>
		<select id="province" onchange="myChange()"></select>
		<select id="cities"></select>
	</p>
	<p>
        <button>注册</button>
    </p>
</form>
<script>

    //用来检查名字是否合规
    function checkLabel(obj,rex,tip) {
        var length = obj.value.length
        var label = obj.parentElement.getElementsByClassName("error")[0]
        if (length > 0) {//里面有内容
            //内容在正则匹配之间
            if (rex.test(obj.value)) {
                label.textContent = "😊"
                return true
            }
            //不在区间之内
            label.textContent = tip
            return false
        }
        //里面没有内容
        label.textContent = "长度必须大于0"
        return false
    }

    //添加提交事件(会具备返回值)
    myForm.onsubmit = () => {
        //阻止表单的提交  需要返回 false
        // return checkName()&&checkPwd()&&checkEmail()
        var f1 = checkLabel(userName)
        var f2 = checkLabel(userEmail)
        var f3 = checkLabel(userPwd)
        return f1 && f2 && f3
    }
		//JavaScript类型不限制
	    //长度不限制
	    //数组可以是字符串
	    var provinces=[]
	    //城市
	    provinces["日本省"]=["北海道","桥豆麻袋","摩西摩西"]
	    provinces["湖南省"]=["长沙","北京","西八"]
	    provinces["广西省"]=["表妹","螺蛳粉","表郭"]
	
	
	    //省份怎么来
	    //  for of 相当于foreach 遍历元素
	    //  for in 遍历下标
	    for(let i in provinces){
	        //往省份的下拉框中添加选项
	        //<option value="i">i</option>
	        province.appendChild(new Option(i,i))
	    }
	
	    //城市里面放谁?
	    function setCity(name) {
	        for(let i of provinces[name]){
	            cities.appendChild(new Option(i,i))
	        }
	    }
	
	    setCity(province.value)
	
	    function myChange() {
	        //清空原来的选项
	        cities.innerHTML=""
	        //输入框 和 下拉框
	        setCity(province.value)
	    }
</script>
</body>
</html>

运行结果

一些基础的正则及基础判定联动

各位朋友们今日分享就到这里啦！

我们下次继续~

王真教掌门

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 表单验证及基础知识

目录JavaScript正则的基础知识完成简单的基础验证表单正则的验证方式及JavaScript的二级联动JavaScript正则的基础知识正则表达式是由普通字符（如英文字母）以及特殊字符（也称为元字符）组成的文字模式。该模式对文本查找时需要匹配的一个或多个字符串描述，给出一个匹配模板。为什么使用正则：因为正则表达式可以大大简化文本识别工作，从而提高代码效率JavaScript的正则写法：正则表达式：/^代码$/（必须是 /^开头，$/ 结...
复制链接

扫一扫