jQuery怎么实现注册正则表单验证

lewis 6年前 (2019-02-09) 阅读数 10 #程序编程

文章标签 jquery

要使用jQuery实现注册表单的正则验证，可以按照以下步骤进行操作：

1. 引入jQuery库：首先，在HTML文件中引入jQuery库。可以通过以下方式引入：

<scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 编写HTML表单：在HTML文件中编写需要验证的注册表单，并为每个输入字段添加相应的id和class属性。

3. 编写JavaScript代码：使用jQuery选择器来获取表单元素，然后添加事件监听器，在该事件监听器中进行正则验证。

下面是一个简单的例子，演示了如何使用jQuery实现注册表单的正则验证：

<!DOCTYPEhtml><html>
<head>
<title>注册表单验证</title>
<scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<formid="registration-form">
<labelfor="username">用户名：</label>
<inputtype="text"id="username"class="form-input"required><br>
<labelfor="email">邮箱：</label>
<inputtype="email"id="email"class="form-input"required><br>
<labelfor="password">密码：</label>
<inputtype="password"id="password"class="form-input"required><br>
<buttontype="submit">注册</button>
</form>
<script>
$(document).ready(function(){
$('#registration-form').submit(function(event){
event.preventDefault();//阻止表单提交
varusername=$('#username').val();
varemail=$('#email').val();
varpassword=$('#password').val();
//正则表达式验证
varusernameRegex=/^[a-zA-Z0-9_-]{4,16}$/;
varemailRegex=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
varpasswordRegex=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if(!usernameRegex.test(username)){
alert('用户名格式不正确');
return;
}
if(!emailRegex.test(email)){
alert('邮箱格式不正确');
return;
}
if(!passwordRegex.test(password)){
alert('密码格式不正确');
return;
}
//所有输入都通过验证，可以提交表单
alert('表单验证通过，可以提交注册');
$('#registration-form').get(0).submit();//提交表单
});
});
</script>
</body>
</html>