JavaScript.正则与表单验证

JavaScript.正则与表单验证.06

表单:感念

表单验证是JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

本期大纲:

JavaScript.正则与表单验证_第1张图片

  1. 简单验证

    • 使用String类型来对数据格式进行判断
    
    
    • 完成用户名和密码的验证

    长度最大为10

    给出未填写提示

    //先创建一个表单
    <form action="" id="myForm">
        //里面写两个输入框
        //p 标签 做跨行作用
        <p>用户名:<input type="text" id="name" required/></p>
        <p>密码:<input type="text" id="pwd" required/></p>
    //弹框提示 required
    </form>
    
    效果:

    在这里插入图片描述

    给出判断提示

//定义一个函数
用上面刚刚定的名字
myForm.onsubmit=()=>{
// 定义一个数据
var s1=name.value
//然后判断 if
if(s1.length==0){//如果里面一个数都没写 则弹出
l1.textContent="请输入用户名"

}
}
  1. 正则验证

    使用正则表达式来对数据格式进行判断
    正则的规则
    内容

    ​ \d 数字 [0-9]

    ​ \D 非数字 1
    ​ \w 数字+英文+下划线 [0-9a-zA-Z_]
    ​ \W 非数字+英文+下划线 2
    ​ . 任意字符
    ​ 次数
    ​ ? 0~1次
    ​ + 至少一次
    ​ * 0~任意次
    ​ \d{5} 五个数字
    ​ \d{5,10} 最少五次,最多10次

    正则的注意事项
    • ​ 规则必须以/^开头
    • ​ 规则必须以&/结尾
    • ​ 规则只需要\d,而不是\d
    • ​ 定义正则对象: var rex=/^\d{5}$/
    • ​ 使用正则对象:rex.test(‘123’)
    正则的使用

    ​ 添加失去焦点事件
    ​ 1. 用户名是否为字母全小写,且位数在5~10位

    密码可以是数字+英文+.,且位数在5~10位
    挑战:实现密码等级显示
    有小写字母,等级加一
    有大写字母,等级加一
    有数字,等级加一
    有.,等级加一

    3. 邮箱验证

    [email protected]

    \w+[.]\w+@\w+[.]\w+
    

JavaScript.正则与表单验证_第2张图片

[email protected]

\w+@\w+[.]\w+

3. 二级联动

  • 先建两个下拉框 select

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	<select id="">
    		<option value ="1">湖南省</option>
    		<option value ="1">南南省</option>
    	</select>
    	<select id="">
    		<option value ="2">长沙市</option>
    		<option value ="2">郴州市</option>
    	</select>
    	</body>
    </html>
    

    源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	<select id="province" onchange="myChange()"></select>
    	<select id="cities"></select>
    	<script type="text/javascript">
    		var provinces=[]
    		//城市
    		provinces[1]=["长沙","郴州"]
    		provinces[3]=["八卦","嘎嘎"]
    		//当代码执行到这一步给省份赋值
    		//for循环
    		//of就相当于 foreach 遍历元素
    		// in 遍历下标  
    		for(let i in provinces){
    		//往省份的下拉框中添加选项
    		//这里的两个 i 一个是value 还有一个 是显示的值
    		provinces.appendChild(new Option(i,i))//追加子节点
    		
    		}
    		//城市
    		function setCity(name){
    			for(let i of provinces[name]){
    				cities.appendChild(new Option(i,i))
    			}
    		}
    		setCity(provinces.value)
    		function myChange(){
    			//刷新清空
    			cities.innerHTML=""
    			setCity(province.value)
    			}
    	</script>
    	</body>
    </html>
    
    

  1. 0-9 ↩︎

  2. 0-9a-zA-Z_ ↩︎

你可能感兴趣的:(javascript,html,前端)