JavaScript.表单验证_js form on text输入后调用function-优快云博客

本文链接：https://blog.youkuaiyun.com/liwangdeng/article/details/123333723

1.先理解表单验证再实现表单验证

2.二级联动

表单验证：是对网页登录界面输入框的内容进行约束和判断

实现简单的表单验证

<span>无效果标签

<body>
<!--<form action="" onsubmit="return check()">-->  //向表单中添加提交事件
<form action="" id="myForm">
    <p>名字: <input type="text" id="userName" ><span id="l1"></span></p>  //定义三个输入框
    <p>密码: <input type="text" id="userPwd" ><span id="l2"></span></p>
    <p>邮箱: <input type="text" id="userEmail" ><span id="l3"></span></p>
    <p>
        <button>登录</button>
    </p>
</form>
<script>
myForm=()=>{
var s1=userName.Value    //拿到输入框的值
var s2=userPwd.Value
var s3=userEmail.Value
var f=ture
if(s1.length==0){    //拿到长度length
l1.textContent="请输入正确的用户名"   //textContent设置标签里面的值
f=false
}
if(s1.length==0){
l2.textContent="请输入正确的密码"
f=false
}
if(s1.length==0){
l3.textContent="请输入正确的邮箱"
f=false
}
return  f
}
</script>
</body>

简单表格验证加强版

onkeyup 鼠标松开事件

运用了短路，短路只会提示第一个输入框

<body>
<form action="" id="myForm">
//onkeyup 鼠标松开事件
    <p>名字: <input type="text" id="userName" onkeyup="b1()"><span id="l1"></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="b2()"><span id="l2"></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="b3()"><span id="l3"></span></p>
    <p>
        <button>登录</button>
    </p>
</form>
<script>
function b1(){
var length=userName.length  //拿长度
if(length>0){
if(length>=3&&length<6){   //if判断
l1.textContent="输入完成"
return ture
}
l1.textContent="请输入3-6位"
return false
}
l1.textContent="请输入用户名"
return false
}
function b2(){
var length=userPwd.length
if(length>0){
if(length>=3&&length<6){
l2.textContent="输入完成"
return ture
}
l2.textContent="请输入3-6位"
return false
}
l2.textContent="请输入密码"
return false
}
function b3(){
var length=userEmail.length
if(length>0){
if(length>=3&&length<6){
l3.textContent="输入完成"
return ture
}
l3.textContent="请输入3-6位"
return false
}
l3.textContent="请输入邮箱"
return false
}
//提交事件判断
myForm.onsubmit=()=>{
return  b1()&&b2()&&b3();   //短路&&遇false就返
}
</script>
<body>

由于代码过于冗长，实现最终版表格验证

学会将多个方法运用一个方法实现效果

运用将返回结果赋值的方法避免短路

<body>
<form action="" id="myForm">
//将多个方法用一个实现  设class运用class选择器
    <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
    <p>
        <button>登录</button>
    </p>
</form>
<script>

    //用来检查是否合规
    function checkLabel(obj) {
        var length = obj.value.length   //拿到文本框内容的长度
        // var label=obj.nextElementSibling   //obj的下一位
        var label = obj.parentElement.getElementsByClassName("error")[0]  //拿到obj的父级，再通过class选择器拿到i标签
        if (length > 0) {//里面有内容
            //名字的大小应该在 3-6 之间
            if (length >= 3 && length <= 6) {
                label.textContent = "😊"
                return true
            }
            //不在区间之内
            label.textContent = "长度必须在3-6之间"
            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
    }
</script>
</body>

用正则来判断表单

正则语句必须填写在/^$/里面

学会正则语句的编写，熟练利用函数传参

<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>
        <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
    }
</script>
</body>

利用正则对密码进行等级判断

学会利用正则进行等级判断，与表单联用

<body>
<input type="text" id="m1">
<span id="l1"></span>
<p>
    密码等级<span id="l2"></span>
</p>
<script>
    m1.onkeyup=function (){
        //长度必须在6-10之间
        var str=m1.value
        if(str!=""){
            //定义正则
            var r1=/^\w{6,10}$/
            // 数字 英文（小写 大写） .
            var r2=/^.*[a-z].*$/
            var r3=/^.*[A-Z].*$/
            var r4=/^.*\d.*$/
            //密码等级
            var dj=""
            //开始正则验证
            if(r1.test(str)){
                l1.textContent="O(∩_∩)O😄"
                if(r2.test(str))dj+="☆"
                if(r3.test(str))dj+="☆"
                if(r4.test(str))dj+="☆"
                l2.textContent=dj
                return
            }
            //不满足
            l1.textContent="不符合格式"
            return
        }
        l1.textContent="不能为空"
    }

</script>
</body>

二级联动的实现

<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>

<script>

    //数组怎么写?
    //类型不限制
    //长度不限制
    //数组可以是字符串
    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>

注：调用value的只有文本框和下拉框，其他的textContent