使用 JavaScript 验证密码和名字答案

【问题标题】：Validations for Password and First name using JavaScript使用 JavaScript 验证密码和名字
【发布时间】：2020-02-12 17:29:21
【问题描述】：

我正在做表单验证，要求是 1.Email：Email必须是有效的Email ID。 2.密码：必须是八个字符长。只允许使用数字 (0-9) 和字母 (A-Z,a-z)。 3.FirstName：不能包含任何数字（0-9）。 4.LastName ：不能包含任何数字（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>

【问题讨论】：

标签： javascript formvalidation.io

【解决方案1】：

密码验证

我们使用以下正则表达式来确保密码只包含字母和数字：

/[^A-Za-z0-9]+/g

[^] : 匹配任何不在集合中的东西
A-Z ：“A”到“Z”范围内的字符
a-Z：“a”到“z”范围内的字符
0-9：“0”到“9”范围内的字符
g：全局标志，允许迭代搜索

所以如果密码中包含非字母和数字，正则表达式返回true。

整个密码验证功能如下：

function isValidPassword(password) {
    if (
        typeof password !== "string" ||
        password.length !== 8 ||
        /[^A-Za-z0-9]+/g.test(password)
    ) 
        return false;
    return true;
}

名字验证

我们使用以下正则表达式来检查密码是否包含任何数字：

/[0-9]+/g

[] ：匹配集合中的任何内容
0-9：“0”到“9”范围内的字符
g：全局标志，允许迭代搜索

全名验证函数如下：

function isValidFirstname(firstname) {
    if (
        typeof firstname !== "string" ||
        /[0-9]+/g.test(firstname)
    ) {
        return false; 
    }
    return true;
}

【讨论】：

【解决方案2】：

只需使用正则表达式即可。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

【讨论】：

【解决方案3】：

可以使用pattern和inbuilt验证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>

【讨论】：