简单的Jquery验证,利用其验证框架(暂时没有ajax)
时间: 2023-08-21 20:02:33 浏览: 39
Jquery有一个非常方便的插件叫做jQuer Validation,利用它可以轻松实现简单的验证功能。这里以验证一个表单中的邮箱和密码为例:
1.在html文件中引入jquery和jquery validation插件:
```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
```
2.编写表单html代码:
```html
<form id="login-form">
<label for="email">邮箱:</label>
<input type="text" id="email" name="email" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" minlength="6" required>
<br>
<button type="submit">登录</button>
</form>
```
3.使用jquery validation对表单进行验证:
```javascript
$(document).ready(function() {
$('#login-form').validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
}
},
messages: {
email: {
required: '请输入您的邮箱',
email: '请输入有效的邮箱地址'
},
password: {
required: '请输入您的密码',
minlength: '密码长度不能少于6位'
}
}
});
});
```
以上代码中,`rules`中的`required`表示该字段不能为空,`email`表示该字段必须为邮箱格式,`minlength`表示该字段长度不能少于6位。`messages`中的内容为自定义错误提示信息。
在用户输入不符合条件时,验证框架会自动弹出提示信息,否则表单提交。