index.cshtml
<form id="formLogin" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">password:</label>
<input type="text" id="password" name="password" />
</div>
<div>
<label for="password1">password1:</label>
<input type="text" id="password1" name="password1" />
</div>
<div><label for="sex">sex:</label>
<select id="sex" name="sex">
<option id="sexopt" value="" selected="selected">请选择</option>
<option id="sexnan" value="1">男</option>
<option id="sexnv" value="2">女</option>
</select>
</div>
<div>
<label for="favorite">level:</label>
<input type="checkbox" id="sport" name="favorite" value="sport" />sport
<input type="checkbox" id="write" name="favorite" value="write" />write
</div>
<div>
<label for="level">level:</label>
<input type="radio" id="one" name="level" value="one" />1
<input type="radio" id="two" name="level" value="two" />2
</div>
<div>
<input id="submit" type="button" value="submit" />
</div>
</form>
@section scripts{
<script type="text/javascript" src="/content/home/index.js"></script>
}
index.js
$().ready(function () {
$("#formLogin").validate({
rules: {
username: {
required: true
},
password: {
required: true
},
sex: {
required: true
},
level: {
required: true
},
favorite: {
required: true
}
},
messages: {
username: {
required: "please input username"
},
password: {
required: "please input password"
},
sex: {
required: "please select sex"
},
level: {
required: "level requred"
},
favorite: {
required: "favorite required"
}
}
, errorPlacement: function (error, element) { //指定错误信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
}
});
});
$("#submit").click(function () {
$("#submit").submit();
});