个人中心
gpt4 book ai didi

javascript - 如何添加检查以使代码显示 'Password too short' 和 'Height is not a number?'

转载 作者：行者123 更新时间：2023-11-28 02:27:18 25 4
gpt4 key购买 nike

我必须向 checkSubmit() 函数添加检查，以便它给出以下响应

  1. 密码不匹配
  2. 密码太短(最少4个字符)
  3. 高度不是数字

我已经完成了第一个，但是我不知道从哪里开始其他两个。为了安全起见，我会发布所有代码，以防万一我遗漏了什么。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Form Validation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <link rel="stylesheet" type="text/css" href="styles/forms.css">
    <script type="text/javascript">

    window.onload=init;
    var form;
        function init() {
            form = document.getElementById('testform');
            form.addEventListener("submit", checkSubmit, false);
            form.addEventListener("reset", checkReset, false);

            form['colour'].addEventListener("change", checkSubmit, false);

            form['name'].focus();
        }
        String.prototype.trim=function() {
            return this.replace(/^\s+1\s+$/g, '');
        }
        function whichButton(name) {
            var buttons=document.getElementsByName(name);
            for (var i in buttons) {
                if(buttons[i].checked) return buttons[i].value
            }
            return false;
        }
        function showOtherColour() {
            document.getElementById('othercolour').style.visibility=
                form['colour'].value=='other' ? 'visible' : 'hidden';
        }
        function checkSubmit() {
            error = new Array();
            //Fill the array with the error value

            form['name'].value=form['name'].value.trim();
            form['email'].value=form['email'].value.trim();
            form['town'].value=form['town'].value.trim();
            form['state'].value=form['state'].value.trim();
            form['postcode'].value=form['postcode'].value.trim();
            form['dob'].value=form['dob'].value.trim();
            form['height'].value=form['height'].value.trim();

            //Check required fields
            if(!form['name'].value)
                error.push('Missing Name');
            if(!form['email'].value)
                error.push('Missing Email Address');
            if(!form['password'].value)
                error.push('Missing Password');

            //Check valid email address
            var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})$/;
            if(!form['email'].value.match(pattern))
                error.push('Invalid Email Address');

            //Check State

            //Check Post Code has 4 digits
            var pattern=/^\d{4}$/;
            if(!form['postcode'].value.match(pattern))
                error.push('Invalid Post Code');
            //Check password matches confirmation
            //var password = ;
            /*
            if(!form['passwordConfirm'].value.match(password)){
                error.push("Passwords don't match");
            }*/

            console.log(form['confirm'].value);
            console.log(form['password'].value);
            if(!form['confirm'].value.match(form['password'].value)){
                error.push('Passwords do not match');
            }

            //Check that one Gender item is selected
            if(whichButton('gender')===false)
                error.push('Please choose a Gender');

            //Check that "Other" field is filled
            if (!form['colour'].value ||
                (form['colour'].value=='other' && !form['othercolour'].value))
                error.push('Colour is not selected');

            if(error.length) { // if there are errors
            alert(error.join("\n"))
            return false;
            }
            else return true;

            //return confirm("This will submit the form"); //Temporary placeholder
        } 
        function checkReset() {
            return confirm("This will clear the form data");
        }
    </script>
<style type="text/css">
body,td,th {
    font-size: 0.9em;
}
</style>
</head>
<body>
<div id="body">
    <h1>Form Validation</h1>
    <form action="http://test.miform.net" method="post" id="testform">
    <fieldset>
        <label>Name<br><input type="text" name="name" class="wide"></label>
        <label>Email Address<br><input type="text" name="email" class="wide"></label>
    </fieldset>
    <fieldset>
        <label>Address<br><input type="text" name="street" class="wide"></label>
        <label>Town<br><input type="text" name="town" class="narrow"></label>
        <label>State<br><input type="text" name="state" class="narrow"></label>
        <label>PostCode<br><input type="text" name="postcode" class="narrow"></label>
    </fieldset>
    <fieldset>
        <label>Password<br><input type="password" name="password" class="medium"></label>
        <label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>
    </fieldset>
    <fieldset>
        <label>Date of Birth<br><input type="text" name="dob" class="medium"></label>
        <label>Height<br><input type="text" name="height" class="medium"></label>
    </fieldset>
    <fieldset>
        <legend>Gender</legend>
        <label><input type="radio" name="gender" value="f">Female</label>
        <label><input type="radio" name="gender" value="m">Male</label>
    </fieldset>
    <fieldset>
        <label>Colour
            <select name="colour">
                <option value="">Select...</option>
                <option value="black">Black</option>
                <option value="white">White</option>
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
                <option value="cyan">Cyan</option>
                <option value="magenta">Magenta</option>
                <option value="yellow">Yellow</option>
                <option value="other">Other</option>
            </select>
        </label>
        <input type="text" id="othercolour">
    </fieldset>
        <input type="reset" name="reset" value="Clear Form">
        <input type="submit" name="send" value="Send Off">
    </form>
</div>
</body>
</html>

最佳答案

第二次这样做:

if (form['password'].value.length < 4) {
    error.push("Password is too short");
}

这是第三个:

if (isNan(Number(form['height'].value))) {
    error.push("Height is not a number");
}

关于javascript - 如何添加检查以使代码显示 'Password too short' 和 'Height is not a number?'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53244597/

25 4 0
文章推荐： JavaScriptMVC 和 Ruby on Rails 集成在一个应用程序中
文章推荐： javascript - 单击时显示缩略图的大图像，但有多个容器
文章推荐： java - 使用 Jsoup 抓取网页
文章推荐： html - 平均堆栈 - Angular 2 网站未完全加载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com