3. 创建一个用于填写用户资料的表单,要求使用Spry 表单验证构件对用户输入的用户名、登录密码、确认密码、出生日期及电子邮件地址等进行验证。以及运行结果
时间: 2024-03-09 13:48:48 浏览: 133
表单验证资料
3星 · 编辑精心推荐
好的,我可以为您提供一份基本的HTML代码,用于创建一个包含Spry表单验证构件的用户资料表单。请参考以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>User Profile Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<script>
$(document).ready(function() {
$("#user-profile-form").validate({
rules: {
username: {
required: true,
minlength: 6,
maxlength: 20
},
password: {
required: true,
minlength: 8,
maxlength: 20
},
confirm_password: {
required: true,
equalTo: "#password"
},
birthdate: {
required: true
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "Please enter your username",
minlength: "Your username must be at least 6 characters long",
maxlength: "Your username must not exceed 20 characters"
},
password: {
required: "Please enter your password",
minlength: "Your password must be at least 8 characters long",
maxlength: "Your password must not exceed 20 characters"
},
confirm_password: {
required: "Please confirm your password",
equalTo: "Your passwords do not match"
},
birthdate: {
required: "Please enter your birthdate"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
}
}
});
$("#birthdate").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-100:+0"
});
$("#phone").mask("000-000-0000");
});
</script>
</head>
<body>
<form id="user-profile-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password"><br>
<label for="birthdate">Birthdate:</label>
<input type="text" id="birthdate" name="birthdate"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
该表单包含用户名、登录密码、确认密码、出生日期和电子邮件地址等字段,同时使用了Spry表单验证构件对这些字段进行验证。具体来说,它要求用户名和密码字段必填且长度在一定范围内,确认密码字段必须与密码字段相同,出生日期和电子邮件地址字段必填且符合相应的格式要求。
运行结果可以通过在浏览器中打开该HTML文件进行查看和测试。如果用户输入的数据不符合验证要求,相应的错误信息会提示给用户。如果用户输入的数据符合要求,表单可以成功提交。
阅读全文