让我们来详细讲解jquery表单验证插件的三种使用方式。
1. 直接将jquery.validate.js文件引入项目中
首先，我们可以在项目中直接引入jquery.validate.js文件，来使用jquery表单验证插件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery表单验证插件示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true
},
password:{
required:true,
minlength:6
}
},
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
minlength:"密码长度不能小于6个字符"
}
}
})
})
</script>
</head>
<body>
<form id="myform" method="post" action="">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在这个示例中，我们引入了jquery.validate.js文件，并使用其提供的validate()方法来对表单进行验证。其中，rules用来设置每个表单元素的验证规则，messages用来设置验证失败时的提示信息。
2. 使用CDN引入jquery.validate.js文件
除了直接引入jquery.validate.js文件，我们还可以使用CDN来引入它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery表单验证插件示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true
},
password:{
required:true,
minlength:6
}
},
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
minlength:"密码长度不能小于6个字符"
}
}
})
})
</script>
</head>
<body>
<form id="myform" method="post" action="">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在这个示例中，我们使用CDN引入了jquery.validate.js文件，并使用其提供的validate()方法来对表单进行验证。其余使用方法同上。
3. 使用npm安装jquery-validation插件
最后，我们还可以使用npm安装jquery-validation插件来使用它。
首先，我们需要在命令行中使用npm安装jquery-validation插件：
npm install jquery-validation
然后在html文件中使用以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery表单验证插件示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./node_modules/jquery-validation/dist/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true
},
password:{
required:true,
minlength:6
}
},
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
minlength:"密码长度不能小于6个字符"
}
}
})
})
</script>
</head>
<body>
<form id="myform" method="post" action="">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
在这个示例中，我们使用npm安装了jquery-validation插件，并引入了它的文件。其余使用方法同上。
以上三种方式都可以用来使用jquery表单验证插件，根据需求选择即可。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery表单验证插件（jquery.validate.js）的3种使用方式 - Python技术站
微信扫一扫 
支付宝扫一扫 