使用 JavaScript 验证密码和名字
Posted
技术标签:
【中文标题】使用 JavaScript 验证密码和名字【英文标题】：Validations for Password and First name using 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>
【问题讨论】：
【参考方案1】：密码验证
我们使用以下正则表达式来确保密码只包含字母和数字：
/[^A-Za-z0-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
全名验证函数如下：
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>【讨论】：
以上是关于使用 JavaScript 验证密码和名字的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Python 和/或 Javascript 自动验证 ngrok 密码？