【问题标题】:How to validate Form using JavaScript如何使用 JavaScript 验证表单
【发布时间】:2019-08-16 07:42:22
【问题描述】:

我正在尝试验证一个论坛 sing js,但它根本不起作用。我尝试了所有方法,我使用了 get 元素并使用了表单 id,但它仍然无法正常工作。

这是代码:

function check()
        {
            var name= document.getElemeentById('name');
            var fname= document.insc.Prenom.value;
            var gender=document.insc.gender;
            var user = document.insc.user.value;
            var phone=document.insc.tel.value;
            var userT=document.insc.choice.selectedIndex;
            var pwd=document.insc.pwd.value;
            var email=document.insc.email.value;
            //name
            if (name.value ==null || name.value == '')
            {
                alert('name required');
                document.insc.name.focus();
                return false;
            }
            //la9ab
            if (fname == null || fname =='') 
            {
                alert('Family Name required');
                document.insc.Prenom.focus();
                return false;
            }
            //sexe
            if (gender[0].checked = false || gender[1].checked= false) 
            {
                alert('pick your Gender');
                return false;
            }
            //user
            if (user == null || user=='') 
            {
                alert('user required');
                document.insc.user.focus();
                return false;
            }
            //phone
            if (isNotNum(phone) && phone =='' && phone.length==8)
             {
                alert('Phone number required');
                document.insc.tel.focus();
                return false;
             }
             //pasword
            if (pwd =='' && pwd.length<=8 ) 
            {
                alert('password too short');
                document.insc.pwd.focus();
                return false;
            } 
            //user type
            if (userT[0] || userT='')
            {
                alert('select user type');
                document.insc.choice.focus();
                return false;
            }
            var atpos =email.indexOf('@');

            var dotpos =email.lastIndexOf('.');

            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)

            {
                    alert('email is wrong');
                    document.insc.choice.focus();
                    return false;
            }

        }
    </script>

    <title>Inscription</title>
    </head>
<body>
    <form action="/" method="GET"  name="insc"  id="form" onsubmit="return check();">
        <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" >
        </div>
        <div>
            <label for="Pname">Family Name </label>
            <input type="text" id="Pname" name="Prenom" >
        </div>
        <div >Birthday Date</div>
        <div >
        <input type="Date" name="date" id="date">
        </div>
        <div>
            <label for="Gender"  >Sexe</label>
            <input type="radio" name="gender" id="H" value="Men" >Men
            <input type="radio" name="gender" value="Female" id="F" >Woman
        </div>
        <div>
            <label for="User">User Name</label>
            <input type="text" id="User" name="User">
        </div>
        <div >
            <label for="tel">phone</label>
            <input type="text" id="tel" name="tel">
        </div>

        <div>
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" >
        </div>
        <div>
            <label for="Pwd">Password</label>
            <input type="Password" id="pwd" name="pwd">
        </div>
        <div >
            <label for="choice">User Type</label>
            <select id="choice" name="choice" >
                <option selected></option>
                <option value="client">client</option>
                <option value="provider">provider</option>
            </select>
        </div>
        <button type="Submit" name="Envoyer" value="Envoyer" >Send</button>
        <input type="button" name="Delete" value="Delete" onclick="rform(); return false">
        </form>
</body>
</html>

请帮助我让它工作,因为我坚持这些,我想继续前进,这样我就可以在我自己的工作中取得进展,提前谢谢

【问题讨论】:

  • 您已经将输入字段指定为required 并添加了可接受的值模式。因此,当您提交表单时,它将自动验证这些字段。第一个字段name 是缺失的模式。你不需要任何脚本。现在,进入您的自定义验证,使用 document.getElementById('id).value 访问文本字段的值。对于单选按钮,它是不同的。然后执行默认表单验证未涵盖的所需验证。
  • 对于初学者来说,防御性地编程,这意味着检查一切并且不要假设你已经正确地完成它,例如,当你调用getElementByID时,在使用之前总是检查返回不是未定义的。此外,使用 typeof 关键字来检查某些内容是否是您期望的类型,例如 name, if ( name != undefined && typeof name == "object" ) {
  • 您应该在填写值时检查每个字段,然后在提交之前检查所有值。而不是为每个字段执行document.insc,好的做法是var fields = document.insc,然后使用fields variable 访问这些值。

标签: javascript html forms onsubmit


【解决方案1】:

您必须检查的几件事:

  • HTML form 验证由您以可接受的值模式使用。这在没有任何Javascript 的情况下有效。为什么要进行自定义验证?
  • 话虽如此,您可能仍希望执行一些自定义验证。所以,这是有理由的。
  • 要在form 中关闭HTML form 验证,请使用novalidate。在这种情况下,您必须依赖自定义验证。否则,默认的 HTML form 验证和自定义验证都会发生。
  • check() 函数中使用document.getElementById('id').valuedocument.getElementsByName('name') 访问值

这是您修改后的代码,我已关闭默认表单验证(您可以通过从 form 中删除 novalidate 来打开它。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Click Events</title>
    <script>
        function check() {
            var name = document.getElementById('name').value;
            var fname = document.getElementById("Pname").value;
            var gender = document.getElementsByName("gender");
            var user = document.getElementById("User").value;
            var phone = document.getElementById("tel").value;
            var userT = document.getElementById("choice").selectedIndex;
            var pwd = document.getElementById("pwd").value;
            var email = document.getElementById("email").value;
            //name
            if (name == undefined || name == '') {
                alert('name required');
                document.insc.name.focus();
                return false;
            }
            //la9ab
            if (fname == undefined || fname == '') {
                alert('Family Name required');
                document.insc.Prenom.focus();
                return false;
            }
            //sexe
            if (gende = undefined || (gender[0].checked == false && gender[1].checked == false)) {
                alert('pick your Gender');
                return false;
            }
            //user
            if (user == undefined || user == '') {
                alert('user required');
                document.insc.user.focus();
                return false;
            }
            //phone
            if (phone == undefined || phone == '' || phone.length != 8) {
                alert('Phone number required');
                document.insc.tel.focus();
                return false;
            }
            //pasword
            if (pwd == undefined || pwd == '' || pwd.length < 8) {
                alert('password too short');
                document.insc.pwd.focus();
                return false;
            }
            //user type
            if (userT == undefined || userT == '' || userT == 0) {
                alert('select user type');
                document.insc.choice.focus();
                return false;
            }

            if (email == undefined || email == '') {
                alert('email is required');
                return false;
            }
            var atpos = email.indexOf('@');

            var dotpos = email.lastIndexOf('.');

            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
                alert('email is wrong');
                document.insc.choice.focus();
                return false;
            }

        }
    </script>
</head>

<body>
    <form action="/" method="GET" name="insc" id="form" onsubmit="return check(); return false;" novalidate>
        <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required pattern="[a-zA-Z]{3-12} ">
        </div>
        <div>
            <label for="Pname">Family Name </label>
            <input type="text" id="Pname" name="Prenom" required pattern="[a-zA-Z]{3-12} " maxlength="12">
        </div>
        <div>Birthday Date</div>
        <div>
            <input type="Date" name="date" id="date" required max="12-31-2011" min="12-31-1960">
        </div>
        <div>
            <label for="Gender">Sexe</label>
            <input type="radio" name="gender" id="H" value="Men" required>Men
            <input type="radio" name="gender" value="Female" id="F" required>Woman
        </div>
        <div>
            <label for="User">User Name</label>
            <input type="text" id="User" name="User" pattern="[a-zA-Z]{3-12}" maxlength="12" required>
        </div>
        <div>
            <label for="tel">phone</label>
            <input type="text" id="tel" name="tel" pattern="[0-9]{8}" maxlength="8" required>
        </div>

        <div>
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <label for="Pwd">Password</label>
            <input type="Password" id="pwd" name="pwd" pattern="[a-zA-Z0-9/*.!:;, ?.]{3-15}" maxlength="15" required>
        </div>
        <div>
            <label for="choice">User Type</label>
            <select id="choice" name="choice" required>
                <option selected></option>
                <option value="client">client</option>ß
                <option value="provider">provider</option>
            </select>
        </div>
        <button type="Submit" name="Envoyer" value="Envoyer">Send</button>
        <input type="button" name="Delete" value="Delete" onclick="rform(); return false">
    </form>
</body>

</html>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-01-22
    • 1970-01-01
    • 2021-11-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-30
    • 2011-12-02
    相关资源
    最近更新 更多