js表单验证与正则
表单验证与正则
目录
-
- 表单验证与正则
- 一，正则表达式
- 二，表单
- 三，下拉框
- 四， for循环
- 五，表单验证中的常用代码
一，正则表达式
相信有一定编程语言学习基础的一定知道正则表达式，javascript的正则表达式其实与java的有95%的相似之处，当然，如果你没有基础或者忘记了也没事，小编今天给大家整理好了
首先：
java 中的正则需要一个转义符，而javascript中的正则需要一个特定的书写规范
// java中的正则表达式：
\\d 需要一个\转义符
// javascript有特定的形式
/^正则$/
然后这里是一些常用的正则
| 正则 | 解释 |
|---|---|
| \d | 数字[0-9] |
| \D | 非数字 ^ [0-9] |
| \w | 数字+字母+下划线[0-9a-zA-Z] |
| \W | 非数字+字母+下划线 ^ [0-9a-zA-Z] |
| . | 任意字符 |
| ? | 0-1次 |
| + | 至少一次 |
| * | 0-任意次 |
| \d{5} | 五个数字 |
| \d{5,10} | 最少5次，最多10次 |
注意事项:
二，表单
表单其实与表格有类似的地方，但表单给多是用来做界面提交的，有提交页面的功能，具备返回值，而表格大多时候是用来放数据更直观的展现数据；
<form action="" method="">
<!-- 这里可以放标签 -->
<p>我是一个表单</p>
<p>姓名：<input id="userName" /> </p>
<p>
密码：<input id="userPwd" />
</p>
</form>
上面是一个表单的结构
三，下拉框
下拉框不相同与其他的标签可以通过input标签来拿出来，下拉框有自己专门的一个写法
<select name="">
<option value=""> 内容</option>
<!-- value是你后台拿的值 -->
</select>
下拉框的一个二级联动
<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["湖南省"]=["长沙","衡阳","永州","郴州","湘潭"]
provinces["广西省"]=["南宁","桂林","柳州"]
provinces["广东省"]=["广州","惠州","东莞","珠海","佛山"]
provinces["江苏省"]=["南京","苏州","无锡"]
provinces["浙江省"]=["杭州","宁波","温州"]
// 拿省份，for of遍历元素
// for in 拿下标
//拿省
for(let i in provinces){
province.appendChild(new Option(i,i))
}
//根据省拿市
function setCity(name){
for( let i of provinces[name]){
cities.appendChild(new Option(i,i))
}
}
//初始化值
setCity(province.value)
//
// provinces.value
//添加监听事件
function myChange(){
cities.innerHTML=""
setCity(province.value)
}
</script>
</body>
这样一个简单的省市二级联动就做好了
四， for循环
for(let i of provinces){
}
for(let i in provinces){
}
这两个for循环有何种区别呢，实现第一种，它采用的是 of,这样就拿的了这个provinces数组里面的值，而采用 in结构的这个for 循环并不是拿的直接值，而是拿的它的下标，通过下标拿值。
五，表单验证中的常用代码
- 长度限制
<p>1. 长度限制</p>
<form name=a οnsubmit="return test()">
<textarea name="b" cols="40" rows="6" placeholder="不能超过50个字！"></textarea>
<br />
<input type="submit" name="Submit" value="check">
</form>
<script language="javascript">
function test()
{
if(document.a.b.value.length>50)
{
alert("不能超过50个字！");
document.a.b.focus();
return false;
}
}
</script>
2.两次输入密码是否相同
<script type="text/javascript">
function checkPwd(){
with(document.all){
if(input1.value!=input2.value)
{
alert("密码不一致")
input1.value = "";
input2.value = "";
}
else {undefined
alert("密码一致");
document.forms[0].submit();
}
}
}
</script>
3，邮箱验证
<script language="javascript">
function test(obj){undefined
//对电子邮件的验证
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!myreg.test(obj))
{undefined
alert('请输入有效的邮箱！');
return false;
}
}
</script>
4.手机号的验证
<script type="text/javascript">
function validatemobile(mobile)
{
if(mobile.length==0)
{
alert('手机号码不能为空！');
return false;
}
if(mobile.length!=11)
{
alert('请输入有效的手机号码！');
return false;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(mobile))
{
alert('请输入有效的手机号码！');
return false;
}
}
</script>
以上呢就是小编给大家分享的内容了，觉得对你有帮助的可以给小编点给赞支持一些，当然也可以关注小编，继续分享精彩内容！