菜鸟教程个人学习心得01_JavaScript表单输入框验证

JavaScript表单验证

1. 判断输入的内容是否只由字母、数字以及表达式构成：

<!-- 正则表达式练习，判断输入的内容是否只由字母、数字以及表达式构成 -->
    <input type="text" id="input" value="">
    <button type="button" onclick="isValid()">点击</button>
    <p id="demo5"></p>
    <script>
        function isValid() {
            var str = document.getElementById('input').value;
            var patt = /^\w+$/;
            var flag = patt.test(str);
            var message = "";
            if (flag) {
                message = "只由字母、数字以及表达式构成！";
            } else {
                message = "还由其他构成！";
            }
            return document.getElementById("demo5").innerHTML = str + message;
        }
    </script>

2. 判断输入字符串是否全部为字母：

<input type="text" id="input1">
    <button type="button" onclick="isLetter()">点击</button>
    <p id="demo6"></p>
    <script>
        function isLetter() {
            var s1 = document.getElementById('input1').value;
            var patt = /^[a-zA-Z]+$/;
            var flag = patt.test(s1);
            var message;
            if (flag) {
                message = "字符串全部为字母！";
            } else {
                message = "字符串不全部为字母！"
            }
            return document.getElementById("demo6").innerHTML = message;
        }
    </script>

3. 判断输入字符串是否全部为数字：

<input type="text" id="input2">
    <button type="button" onclick="isNumber()">点击</button>
    <p id="demo7"></p>
    <script>
        function isNumber() {
            var s2 = document.getElementById('input2').value;
            var patt = /^[0-9]+$/;
            var flag = patt.test(s2);
            if (flag) {
                document.getElementById("demo7").innerHTML = "字符串全部为数字！";
            } else {
                document.getElementById("demo7").innerHTML = "字符串不全为数字！";
            }
            document.getElementById("input2").value = "";
        }
    </script>

4. 判断输入字符串是否带有小数:

<input type="text" id="input3">
    <button type="button" onclick="isDecimal()">点击</button>
    <p id="demo8"></p>
    <script>
        function isDecimal() {
            var s3 = document.getElementById("input3").value;
            var patt = /^[0-9]+\.[0-9]+$/;
            var flag = patt.test(s3);
            if (flag) {
                document.getElementById("demo8").innerHTML = "字符串带有小数!"
            } else {
                document.getElementById("demo8").innerHTML = "字符串不带有小数!"
            }
            document.getElementById("input3").value = "";
        }
    </script>

5. 判断输入字符串是否中文名称组成

<input type="text" id="input4">
    <button type="button" onclick="isChinese()">点击</button>
    <p id="demo9"></p>
    <script>
        function isChinese() {
            var s4 = document.getElementById("input4").value;
            var patt = /^[\u4E00-\u9FA5]{2,4}$/;
            var flag = patt.test(s4);
            if (flag) {
                document.getElementById("demo9").innerHTML = "字符串全由中文名称组成！"
            } else {
                document.getElementById("demo9").innerHTML = "字符串不全由中文组成！"
            }
            document.getElementById("input4").value = "";
        }
    </script>

6. 校验是否全由8位数字组成:

<input type="text" id="input5">
    <button type="button" onclick="isStudentNo()">点击</button>
    <p id="demo10"></p>
    <script>
        function isStudentNo() {
            var s5 = document.getElementById("input5").value;
            var patt = /^[0-9]{8}$/;
            var flag = patt.test(s5);
            if (flag) {
                document.getElementById("demo10").innerHTML = "字符串由8位数字组成！"
            } else {
                document.getElementById("demo10").innerHTML = "字符串不由8位数字组成组成！"
            }
            document.getElementById("input5").value = "";
        }
    </script>

7. 校验电话码格式:

<input type="text" id="input6">
    <button type="button" onclick="isTelCode()">点击</button>
    <p id="demo11"></p>
    <script>
        function isTelCode() {
            var s = document.getElementById("input6").value;
            var patt = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
            var flag = patt.test(s);
            if (flag) {
                document.getElementById("demo11").innerHTML = "输入的电话号码格式正确！"
            } else {
                document.getElementById("demo11").innerHTML = "输入的电话号码格式错误！"
            }
            document.getElementById("input6").value = "";
        }
    </script>

8. 错误处理:

<button type="button" onclick="showMessages()">显示错误信息</button>
    <script>
        var errorMessage = "";
        function showMessages() {
            try {
                aalert("错误信息！")
            } catch (error) {
                errorMessage = " 错误文本信息" + "\n";
                errorMessage += error.message;
                alert(errorMessage);
            }
        }
    </script>

9. 验证邮箱：

<form action="">
        <input type="text" id="email" required="required">
        <button type="button" onclick="isEmail()">提交</button>
    </form>
    <script>
        function isEmail() {
            var email = document.getElementById("email").value;
            var patt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var flag = patt.test(email);
            if (flag) {
                alert("输入的邮箱地址为：" + email);
            } else {
                alert("请输入正确的邮箱地址！");
            }
            return document.getElementById("email").value = ""
        }
    </script>