文本框内容验证

229 阅读1分钟
form action="success.html" id="form">
    <p>
        姓名:<input type="text" name="text" id="xm">
    </p>
    <p>
        密码:<input type="password" name="pwd" id="pwd">
    </p>
    <p>
        再次输入密码:<input type="password" name="repwd" id="repwd">
    </p>
    <input type="submit" value="submit">
    <input type="button" name="" id="btn">
</form>
<!-- 
    1、姓名 密码 非空校验
    2、姓名不能包含数字 需要循环一个一个用isNaN 结合 substring 校验
    3、密码 小于6个字符 给个提示 不能少于6位
    4、密码和再次输入密码需要一致
    满足以上才能提交到success页面
 -->
<script>
    let form = document.getElementById('form');
    let xm = document.getElementById('xm');
    let pwd = document.getElementById('pwd');
    let repwd = document.getElementById('repwd');
    let btn = document.getElementById('btn');
    btn.onclick = function(){
        console.log(xm.value)
    }
    form.onsubmit = function () {
        /* == === */
        /* == 是比较两者的值,不校验类型 */
        /* === 是严格等于,既比较两者的值,也比较两者值的类型 */
        /* trim()方法去除 字符串左右的空格 */
        if(xm.value==''){
            alert('姓名不能为空');
            return false;
        }
        for(let i=0;i<xm.value.length;i++){
            let s = xm.value.substring(i,i+1);
            /* isNaN(s)==false表示是一个数组 */
            if(isNaN(s)==false){
                alert('姓名不能包含数字')
                /* 只有有一个有数字有return false */
                return false;
            }
        }
        if(pwd.value==''){
            alert('密码不能为空');
            return false;
        }
        if(pwd.value.length<6){
            alert('密码不能小于6位');
            return false;
        }
        if(pwd.value.trim()!=repwd.value.trim()){
            alert('两次输入的密码要一致');
            return false;
        }
        return true;
    }
</script>