javascript表单验证

最新推荐文章于 2023-08-16 12:23:17 发布

钟意

最新推荐文章于 2023-08-16 12:23:17 发布

阅读量517

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_61857264/article/details/123319429

版权

表单介绍：

一个表单由三个部分组成

表单标签：包含数据提交到服务器的方法

表单域：包含文本框、密码框、文本域、复选框、单选按钮、下拉按钮等

表单按钮：一般就是提交按钮

建立表单


<form action="" onsubmit="return check()">    //在提交时会返回一个参数
			<p>名字:<input type="text" id="uname"/>    //名字输入框
			<span><i class="error"></i></span></p>     //名字提示信息
			<p>密码:<input type="text" id="upwd"/>     //密码输入框
			<span><i class="error"></i></span></p>    //密码提示信息
			<p>邮箱:<input type="text" id="uemail"/>  //邮箱输入框
			<span><i class="error"></i></span></p>    //邮箱提示信息
			<p><button type="button">登录</button></p>    //表单中的按钮会默认识别为提交按钮

当需要拿到输入框的值去做验证时可以用到一下方法

onkey

up//键盘松开可以准确检测到按下的每一个键

onkeydown//键盘按下第一个按下的键不会被检测到

onkeypress// 当键盘完成一次敲击时

注意：当需要准确拿到键盘每一次输入的值是应使用 onkeyup

正则判断

格式：

/^&/   //匹配规则
使用方法：方法名.test()//括号里面放需要匹配的正则

正则表达式常用的属性，长度与次数

\d 数字[0-9]
\D 非数字 ^[0-9]
\w 数字+英文+下划线 [0-9a-zA-Z]
\W 非数字+英文+下划线 ^[0-9a-zA-Z]
. 任意字符

？ 0-1次
+ 至少一次
* 0-任意次
\d{5} 五个数字
\d{5,10} 最少五次，最多10次

案例

对用户名，密码框，邮箱输入的值进行判断（使用正则）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>
 
<script>
 
    //JS数组特点：
    //类型不限制
    //长度不限制
    //数组可以是字符串
    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>

二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<select name="" id="privence" onchange="myChange()">
			</select>
			<select id="cities">
			</select>
			<script >
	var a=[]
	a["湖南省"]=["长沙","岳阳","株洲"]
	a["河北省"]=["石家庄","荆州","张家口"]
	a["云南省"]=["昆明","大理","洱海","德州"]
	for(let i in a){
		privence.appendChild(new Option(i,i))
		console.log(i)
	}
	function setCity(a1){
		for(let i of a[a1]){
			cities.appendChild(new Option(i,i))
		}
	}
	  setCity(privence.value)
	
	    function myChange() {
	        //清空原来的选项
	        cities.innerHTML=""
	        //输入框 和 下拉框
	        setCity(privence.value)
	    }
			</script>
	</body>
</html>

敢不敢用一年时间改变自己

钟意

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript表单验证

目录表单介绍：建立表单正则判断案例表单介绍：一个表单由三个部分组成表单标签：包含数据提交到服务器的方法表单域：包含文本框、密码框、文本域、复选框、单选按钮、下拉按钮等表单按钮：一般就是提交按钮建立表单<form action="" onsubmit="return check()"> //在提交时会返回一个参数 <p>名字:<input type="text" id="uname"/> //名字输入
复制链接

扫一扫