表单验证插件
表单验证规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#myform label.error{
color: #FF0000;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
//引入表单验证插件
<script src="js/jquery.validate.js"></script>
<script>
//区分java的类方法以及对象方法
//类方法:类.getcon;
//对象方法:student sd=new student;sd.addstu;
$(function(){
//继承
// var s1={};
// var s2={"name":"大哥","age":18};
// $.extend(s1,s2);
//$.extend()扩展类方法
// $.extend({
// abcd:function(){
// alert(123);
// },
// getmax:function(a,b){
// return a>b?a:b;
// },
// getmin:function(a,b){
// return a<b?a:b;
// }
// })
// var min=$.getmin(10,40);
// console.info(min);
// $.abcd();
//$.fn.extend()扩展对象方法
// $.fn.extend({
// xx:function(){
// $(this).each(function(i,ck){
// ck.checked=true;
// })
// },
// yy:function(){
// $(this).each(function(i,ck){
// ck.checked=false;
// })
// }
// })
// $("#ok").click(function(){
// $(".xz").xx();
// })
// $("#nook").click(function(){
// $(".xz").yy();
// })
//
// $("#qx").click(function(){
// if($(this).prop("checked")){
// $(".xz").xx();
// }else{
// $(".xz").yy();
// }
// })
$("#myform").validate({
rules:{
uname:"required"
},messages:{
uname:"用户名不能为空",
}
})
})
</script>
</head>
<body>
<input type="button" value="全选" id="ok"/>
<input type="button" value="取消全选" id="nook"/>
<input type="checkbox" value="全选" id="qx"/>全选
<input type="checkbox" value="打篮球" class="xz"/>
<input type="checkbox" value="打王者" class="xz"/>
<input type="checkbox" value="打lol" class="xz"/>
<form id="myform">
用户名:<input type="text" name="uname" />
密码:<input type="text" name="upwd" />
<input type="submit" value="提交" />
</form>
</body>
</html>