表单验证验证空是否空值和邮箱格式是否正确给表单加上样式，不使用alert打印/* isNaN 不是数字返回true *

验证空是否空值和邮箱格式是否正确

<form action="1.html" id="form">
        <p>
            Emall：<input type="text" name="usename" id="usename" >

        </p>
        <input type="submit">
    </form>
    <script>  
    let form = document.getElementById('form');
        form.onsubmit = function(){
           let usename  = document.getElementById('usename').value ;
           if(usename.trim()==''){
            alert('用户名不能为空');
            return false;
           }
           if(usename.indexOf('@')==-1||usename.indexOf('.')==-1 ){
            alert('输入正确的格式');
            return false;
           }
        }

给表单加上样式，不使用alert打印

<body>
    <form action="1.html">
        <p>电子邮箱：<input type="text" name="yx" id="yx" onblur="blurFn()"><span id="span1"></span></p>
        <p>男：<input type="radio" name="1" id="">女：<input type="radio" name="1" id=""></p>
        <p><input type="submit" value="提交"></p>
    </form>
    <script>
        let form = document.querySelector('form');
        let span1 = document.querySelector('#span1');
        function blurFn() {
            let yx = document.querySelector('#yx');
            if (yx.value.trim() == '') {
                yx.style.borderColor = 'red';
                span1.innerHTML = '密码不能为空';
                span1.style.color = 'red';
                return false;
            }
            span1.innerHTML = '';
            yx.style.borderColor = '';
            span1.style.color = '';
            return true;
        }
        form.onsubmit = function () {
            let yx = document.querySelector('#yx').value;
            if (yx.indexOf('@') == -1 || yx.indexOf('.') == -1) {
                span1.innerHTML = '必须包含@和.字符';
                span1.style.color = 'red';
                return false;
            }
            return true;
            span1.style.color = '';
            span1.innerHTML = '';
            if (blurFn()) {
                return true;
            }
            return false;
        }

/* isNaN 不是数字返回true */

/* 先校验是否为空再校验里面的内容 */