当我们使用表单时，常常需要验证用户输入的合法性。为了方便实现这个功能，在JavaScript中可以使用jQuery Validate插件。jQuery Validate插件可以实现常见的表单验证功能，并且具备易用性、灵活性和扩展性。本攻略将详细讲解jQuery Validate插件中使用ajax方式验证输入值的实现。
1. 引入jQuery和jQuery Validate插件
首先，需要在HTML页面中引入jQuery和jQuery Validate的JavaScript文件。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
2. 配置jQuery Validate插件
接下来，在JavaScript文件中配置jQuery Validate插件。例如，我们要验证一个表单，其中包含一个姓名输入框和一个手机号输入框。我们需要在JavaScript文件中设置以下内容：
$(document).ready(function(){
$("#myform").validate({
rules: {
name: "required",
phone: {
required: true,
remote: "check_phone.php"
}
},
messages: {
name: "请输入您的姓名",
phone: {
required: "请输入手机号码",
remote: "该手机号已经被注册"
}
}
});
});
$("#myform"): 表明要对哪个表单进行验证，其值为表单的id属性。rules: 设置验证规则，每个表单控件对应一个验证规则。name: "required"表示姓名为必填项。phone的验证规则比较复杂，它既是必填项，同时还需要远程验证手机号是否已被注册。这个远程验证功能需要在服务端实现，并在remote属性中设置远程验证的URL。messages: 设置提示信息，其值也是一个对象。该对象的每个属性对应表单控件的每种状态。例如，name的提示信息为“请输入您的姓名”，phone的提示信息有两种，required为“请输入手机号码”，remote为“该手机号已经被注册”。
3. 服务端实现远程验证
在上一步中，我们已经设置了remote属性来实现远程验证功能。下面，我们来看看这个功能以及如何在服务端实现。远程验证功能通过ajax方式实现。
在服务端，我们可以使用PHP语言实现远程验证功能。我们来看看一个简单的示例，假设我们的服务器地址为http://localhost，验证脚本文件名为check_phone.php。
<?php
$phone = $_REQUEST['phone'];
//检查手机号码是否已经被注册，这里用假数据代替
$result = $phone == '13888888888' ? false : true;
if ($result) {
echo "true"; //必须返回字符串true表示验证通过
}
else {
echo "false"; //必须返回字符串false表示验证不通过
}
?>
以上PHP脚本的功能为接收客户端发送的手机号码，然后检查该手机号是否已经被注册。如果该手机号未注册，则返回字符串true，表示验证通过；否则返回字符串false，表示验证不通过。
4. 示例1：验证用户名是否已存在
现在，我们已经完成了配置jQuery Validate插件和实现远程验证功能的工作。下面，我们来看看具体的使用方法。以下是一个示例：验证用户名是否已存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Validate插件ajax方式验证输入值的实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
username: {
required: true,
rangelength: [6, 16],
remote: {
url: "check_username.php",
type: "post",
dataType: "json",
data: {
username: function() {
return $("#username").val();
}
}
}
},
password: {
required: true,
rangelength: [6, 16]
}
},
messages: {
username: {
required: "请输入用户名",
rangelength: "用户名长度为6-16个字符",
remote: "用户名已存在"
},
password: {
required: "请输入密码",
rangelength: "密码长度为6-16个字符"
}
}
});
});
</script>
</head>
<body>
<form id="myform" method="post" action="#">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
以上示例中，客户端首先进行基本的表单验证，包括required和rangelength验证。其次，在用户名输入框中使用了remote属性，该属性的值设置为一个对象，其中url属性指向服务端验证脚本的URL；type属性指明了请求的方式为POST方法；dataType属性指明了服务器返回的数据类型为JSON格式；data属性是一个对象，用来提交需要验证的参数，这里我们只需要提交用户名即可。
服务端的验证脚本可以使用PHP编写，具体代码如下：
<?php
header("Content-Type: application/json;charset=utf-8");
$username = $_POST['username'];
//模拟检查用户名是否已被注册
$exists = $username == 'admin' ? true : false;
if ($exists) {
echo json_encode(array("valid" => false, "message" => "用户名已存在"));
}
else {
echo json_encode(array("valid" => true));
}
?>
以上示例中，我们使用了PHP编写验证脚本。客户端提交的是POST请求，并带有一个username参数。服务器接收到参数后，检查该用户名是否已经存在，并将结果以JSON格式返回给客户端。其中如果用户名已经存在，则设置valid属性为false，并设置message属性为错误提示信息，例如“用户名已存在”；否则，仅设置valid属性为true即可。
5. 示例2：验证手机号是否已绑定
以下是一个更具体的示例：验证手机号是否已绑定。这里我们依然使用jQuery Validate插件，同时服务端仍然使用PHP语言。服务端检查手机号是否已被绑定的实现与前面的示例类似，不做过多的介绍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Validate插件ajax方式验证输入值的实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
name: {
required: true,
rangelength: [2, 20]
},
phone: {
required: true,
digits: true,
minlength: 11,
maxlength: 11,
remote: {
url: "check_phone.php",
type: "post",
data: {
phone: function() {
return $("#phone").val();
}
}
}
}
},
messages: {
name: {
required: "请输入姓名",
rangelength: "姓名长度为2-20个字符"
},
phone: {
required: "请输入手机号码",
digits: "请输入11位数字",
minlength: "请输入11位数字",
maxlength: "请输入11位数字",
remote: "该手机号已经被绑定"
}
}
});
});
</script>
</head>
<body>
<form id="myform" method="post" action="#">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="phone">手机号码：</label>
<input type="text" id="phone" name="phone"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
以上示例中，客户端首先进行基本的表单验证，包括required、digits、minlength和maxlength验证。其次，在手机号码输入框中使用了remote属性，该属性的值设置为一个对象，其中url属性指向服务端验证脚本的URL；type属性指明了请求的方式为POST方法；data属性是一个对象，用来提交需要验证的参数，这里我们只需要提交手机号码即可。
服务端的验证脚本可以使用PHP编写，具体代码如下：
<?php
$phone = $_POST['phone'];
//模拟检查手机号码是否已经绑定
$exists = $phone == '13888888888' ? true : false;
if ($exists) {
echo "false"; //必须返回字符串false表示验证不通过
}
else {
echo "true"; //必须返回字符串true表示验证通过
}
?>
以上示例中，我们使用了PHP编写验证脚本，客户端提交的仍然是POST请求，并带有一个phone参数。服务器接收到参数后，检查该手机号是否已经绑定，并将结果以字符串形式返回给客户端。其中如果手机号已经被绑定，则返回字符串false，表示验证不通过；否则，返回字符串true，表示验证通过。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery Validate插件ajax方式验证输入值的实例 - Python技术站
微信扫一扫 
支付宝扫一扫 