javascript - 使用 JavaScript 验证密码和名字

标签 javascript formvalidation.io

我正在做表单验证,要求是 1.电子邮件:电子邮件必须是有效的电子邮件ID。 2.密码:长度必须为八个字符。只允许使用数字 (0-9) 和字母 (A-Z,a-z)。 3.名字:不能包含任何数字(0-9)。 4.姓氏:不得包含任何数字 (0-9)。 我为电子邮件地址做了操作,我对密码和名字验证感到震惊。 任何人都可以帮助我提前致谢。

    <form>
            <label for="">First Name</label>
            <input type="text" id="fname"><br>
            <label for="">Last Name</label>
            <input type="text" id="lname"><br>
            <label for="">Email</label>
            <input type="text" id="email"><br>
            <label for="">Password</label>
            <input type="text" id="password"><br>
           <button type="button" onclick="claim()">Claim Your Free Trail</button>
           <p>You Are Agreeing to Our <a href="#">Terms & Condition</a></p>
        </form>

        <script>
            function claim(){
                var obj ={
                    fname:"",
                    lname:"",
                    email:"",
                    password:""
                }

                for(a in obj){
                    obj[a]=document.getElementById(a).value
                }
                if(obj.email.match(/@/) != null){

                }else{
                    alert("Please enter Valid Email Address")
                }
                console.log(obj)
            }
        </script>
    </body>

最佳答案

您可以使用 HTML 表单的模式内置验证

  • [^\d]+ - 仅允许除数字之外的字符
  • [\dA-Za-z]{8,} - 确保仅允许使用数字和字母且至少 8 个字符

<body>
  <form validate>
    <label for="">First Name</label>
    <input type="text" id="fname" pattern="[^\d]+" required><br>
    <label for="">Last Name</label>
    <input type="text" id="lname"><br>
    <label for="">Email</label>
    <input type="email" id="email" required><br>
    <label for="">Password</label>
    <input type="password" id="password" pattern="[\dA-Za-z]{8,}" required><br>
    <button type="submit">Claim Your Free Trail</button>
    <p>You Are Agreeing to Our <a href="#">Terms & Condition</a></p>
  </form>
</body>

关于javascript - 使用 JavaScript 验证密码和名字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58404736/

相关文章:

包含其代码的 Javascript 函数的属性

javascript - 为什么我的代码只有一部分有效?

验证表单字段时的 jQuery 触发事件

javascript - 不推送数组的表单验证

javascript - Formvalidation.io - 无法读取 null 的属性 'classList'

javascript - 动态 javascript 表不会显示数组的迭代

javascript - 无法解释的参数传递到 JavaScript 函数中,我缺少一些基本的东西

javascript - 无序列表,动态加载 <li>

javascript - 表单验证.io : Runtime add input fields to the validators

javascript - formvalidation.io 中的表单验证多个表单之间存在冲突