zoukankan      html  css  js  c++  java
  • 表单校验demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function check() {
                //教研名字
                var firstnamev = document.getElementById('firstname').value;
                if (firstnamev == '') {
                    alert('名字不能为空');
                    return false;
                } else {
                    for (var i = 0; i < firstnamev.length; i++) {
                        var c = firstnamev[i];
                        if (c >= 0) {
                            alert('名字不能包含数字');
                            return false;
                        }
                    }
                }
                //教研姓氏
                var lastnamev = document.getElementById('lastname').value;
                if (lastnamev == '') {
                    alert('姓氏不能为空');
                    return false;
                } else {
                    for (var j = 0; j < lastnamev.length; j++) {
                        var cl = lastnamev[j];
                        if (cl >= 0) {
                            alert('姓氏不能包含数字');
                            return false;
                        }
                    }
                }
    
                //校验邮箱
                var emailv = document.getElementById('email').value;
                if (emailv == '') {
                    alert('邮箱不能为空!');
                    return false;
                } else {
                    var index1 = emailv.indexOf('@');//字符串中包含“@”
                    var index2 = emailv.indexOf('.');//字符串中包含“.”
                    if (index1 == -1 || index2 == -1) {//@,.不存在
                        alert('邮箱地址不合法!');
                        return false;
                    } else if (index1 >= index2) {//@在.的后面,索引大于.
                        alert('邮箱地址不合法!');
                        return false;
                    }
                }
    
                //校验密码
                var p = document.getElementById('password').value;
                if (p == '') {
                    alert('密码不能为空!');
                    return false
                } else if (p.length <= 3) {
                    alert('密码长度小于6!');
                    return false;
                }
    
                var chekpsdv = document.getElementById('check_password').value;
                if (chekpsdv == '') {
                    alert('请再次输入密码');
                    return false;
                }
                else if (chekpsdv != p) {
                    alert('两次输入密码不一致');
                    return false;
                }
            }
        </script>
    </head>
    <body>
    <form action="do.html" onsubmit="return check();">
        名字:<input type="text" id="firstname"><br>
        姓氏:<input type="text" id="lastname"><br>
        邮箱:<input type="text" name="" id="email"><br>
        密码:<input type="txt" name="" id="password"><br>
        再次输入密码:<input type="txt" name="" id="check_password"><br>
        <input type="submit" value="提交">
    </form>
    </body>
    </html>
  • 相关阅读:
    截取字符
    vue中移动端调取本地的复制的文本
    vue中用 async/await 来处理异步
    vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
    spy-debugger 安装以及使用
    vuex用法-新手一
    monent API详解
    原生js标识当前导航位置(给当前导航一个className=active)
    webpack 4.0 配置文件 webpack.config.js文件的放置位置
    移动端部分安卓手机(三星,小米)竖拍上传图片预览的时候发生旋转问题
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/7068718.html
Copyright © 2011-2022 走看看