JavaScript html表单验证
onsubmit=""当表单提交时执行 JavaScript:
html约束
indexOf（）方法
indexOf() 方法返回值在字符串中第一次出现的位置。
从0开始索引
如果未找到该值，则 indexOf() 方法返回 -1。
indexOf() 方法区分大小写。
JavaScript 验证APII
JavaScript约束验证DOM属性
JavaScript Validity属性
isNaN();用于判断是否为数字返回是数字为false;不是为true
代码演示
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
</head>
<h1>表单验证</h1>
<p>请输入0-10之间的数字</p>
<input id="num">
<button type ="button" onclick="test13();">提交</button>
<span id="result"></span>
<!-- 必填项目的验证-required html约束-->
<form>
<input type="number" name="pilot_id" required="required">
<input type="submit" name="提交">
</form>
<!-- 通过onsubmit document.forms进行验证 -->
<form name="myform1" onsubmit="test13_1()">
<input type="number" name="name13_1">
<input type="submit" name="提交">
</form>
<!-- 验证邮箱合法 -->
<form name="email" onsubmit="email1()">
<input type="text" name="name13_2">
<input type="submit" name="提交">
</form>
<!-- API验证 -->
<input id ="id13_3" max="100" min="50" type="number" required>
<button type ="button" onclick=" test13_3();">提交</button>
<p id="demo13_3"></p>
<!-- 最大值判断 -->
<input id ="id13_4" max="100" min="50" type="number" required>
<button type ="button" onclick=" test13_4();">提交</button>
<p id="demo13_4"></p>
<script>
//验证是否为数字且满足内容要求
function test13(){
var x,txt;
x=document.getElementById("num").value; //或者使用querySelector("#num").value属性
if(isNaN(x) ||x<1||x>10 ){ //isNaN用于判断不是数字
txt=`<p style="color:red;">输入内容不合法啊</p>`;
}else{
txt=`<p style="color:green;">输入内容合法</p>`;
}
document.getElementById("result").innerHTML=`${txt}`;
};
//必填项目验证约束
function test13_1(){
//从form表单里的input标签获取内容
var x = document.forms["myform1"]["name13_1"].value;
if (x == null || x == ""){
window.alert("提交结果为空");
return false;
}
};
//email验证
function email1(){
var x,y,z;
x= document.forms["email"]["name13_2"].value;
y =x.indexOf(".");//返回.出现的位置 从0开始索引
z =x.indexOf("@");//返回@出现的位置
console.log (y);
console.log(z);
if(z<1 || y<z+2 ||y+2>x.length){
alert("非法地址");
return 0;
};
};
//验证API
function test13_3(){
var inObj = document.getElementById("id13_3");
if(inObj.checkValidity()==false){
document.getElementById("demo13_3").innerHTML = inObj.validationMessage;//.validationMessage属性系统默认报错返回信息
}else{
document.getElementById("demo13_3").innerHTML = "输入正确";
}
};
//最大值判断使用rangeOverflow
function test13_4(){
var inObj = document.getElementById("id13_4");
if(inObj.validity.rangeOverflow){
document.getElementById("demo13_4").innerHTML = inObj.validationMessage;//.validationMessage属性系统默认报错返回信息
}else{
document.getElementById("demo13_4").innerHTML = "输入正确";
}
};
</script>
</html>