验证表单的两种方式

在提交表单前  往往要验证表单内容是否符合格式或者不为空，这时候需要验证表单内容 ，如果通过自己写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="邮箱")]，并且要求表单所在的页面是该模型的强类型视图页面，