实现如下表单的验证:初始生成4位数字随机验证码。1)用户名为空、注册时显示对应提示信息。2)要求输入的email中必须包含@字符,点号必须出现在@之后并且至少间隔一个字符,@之后必须有点号。3)手机号必须是11位数字形式4)输入的验证码如果和生成的4位随机验证码一致,则通过验证,如不一致则需要把密码文本框和验证码文本框置空。
时间: 2024-03-15 08:46:22 浏览: 71
您可以按照以下步骤实现该表单的验证:
1. 生成随机验证码
```python
import random
# 生成4位随机验证码
def generate_code():
code = ""
for i in range(4):
code += str(random.randint(0, 9))
return code
# 调用函数生成验证码
code = generate_code()
```
2. 验证用户名非空
```javascript
var username = document.getElementById("username").value;
if (username == "") {
alert("用户名不能为空!");
return false;
}
```
3. 验证email格式
```javascript
var email = document.getElementById("email").value;
if (email.indexOf("@") == -1 || email.indexOf(".") == -1 || email.indexOf(".") < email.indexOf("@")) {
alert("email格式不正确!");
return false;
}
```
4. 验证手机号格式
```javascript
var phone = document.getElementById("phone").value;
if (phone.length != 11 || isNaN(phone)) {
alert("手机号格式不正确!");
return false;
}
```
5. 验证验证码是否正确
```javascript
var code_input = document.getElementById("code").value;
if (code_input != code) {
alert("验证码错误!");
document.getElementById("password").value = "";
document.getElementById("code").value = "";
return false;
}
```
完整的表单验证代码示例:
```html
<form onsubmit="return validate_form();">
用户名:<input type="text" name="username" id="username"><br>
Email:<input type="text" name="email" id="email"><br>
手机号:<input type="text" name="phone" id="phone"><br>
验证码:<input type="text" name="code" id="code"><br>
密码:<input type="password" name="password" id="password"><br>
<input type="submit" value="注册">
</form>
<script>
function generate_code() {
var code = "";
for (var i = 0; i < 4; i++) {
code += Math.floor(Math.random() * 10);
}
return code;
}
var code = generate_code();
function validate_form() {
var username = document.getElementById("username").value;
if (username == "") {
alert("用户名不能为空!");
return false;
}
var email = document.getElementById("email").value;
if (email.indexOf("@") == -1 || email.indexOf(".") == -1 || email.indexOf(".") < email.indexOf("@")) {
alert("email格式不正确!");
return false;
}
var phone = document.getElementById("phone").value;
if (phone.length != 11 || isNaN(phone)) {
alert("手机号格式不正确!");
return false;
}
var code_input = document.getElementById("code").value;
if (code_input != code) {
alert("验证码错误!");
document.getElementById("password").value = "";
document.getElementById("code").value = "";
return false;
}
return true;
}
</script>
```
阅读全文