在提交表单前 往往要验证表单内容是否符合格式或者不为空,这时候需要验证表单内容 ,如果通过自己写js代码的话 相当麻烦 ,这里有两种验证方式:
1、通过引用 jquery.validate.js (当然要先引用jquery.js 此时这个js文件可能版本会不匹配导致效果出不来,这时候可以更换版本使其都是高版本或者低版本)
例如要验证form1 加入如下代码 完成验证 (如果验证不通过内部会return false 终止执行下面的代码并提示相应的信息)
注意:代码中的firstname 等属性 是和form中的name属性是对应的
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
//topic: {
// required: "#newsletter:checked",
// minlength: 2
//},
//agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
// agree: "请接受我们的声明",
// topic: "请选择两个主题"
}
})
});
</script>
通过审查元素发现提示信息在class="error"的label中,如果想改变提示信息的样式,可以依据此处进行修改,例如
<style type="text/css">
.error{
color:red;
font-size:15px;
}
</style>
2、第二种方法是mvc特有的 (需要引用jquery.js, jquery.validate.js ,jquery.validate.unobtrusive三个js文件):
在实体模型类中加上相应的特性标签 例如[Required(ErrorMessage="错误提示信息")]、[RegularExpression("正则表达式",ErrorMessage="邮箱")],并且要求表单所在的页面是该模型的强类型视图页面,