jquery中的表单验证if($.sValid())是否写错了？$.valid()这样写表单木有反应，改肿么写？

Posted 2023-05-03

jQuery校验
官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation
一导入js库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

三、默认的提示
messages:
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than 0 characters."),
minlength: $.validator.format("Please enter at least 0 characters."),
rangelength: $.validator.format("Please enter a value between 0 and 1 characters long."),
range: $.validator.format("Please enter a value between 0 and 1."),
max: $.validator.format("Please enter a value less than or equal to 0."),
min: $.validator.format("Please enter a value greater than or equal to 0.")
,
如需要修改，可在js代码中加入：
jQuery.extend(jQuery.validator.messages,
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 0 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 0 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 0 和 1 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 0 和 1 之间的值"),
max: jQuery.validator.format("请输入一个最大为0 的值"),
min: jQuery.validator.format("请输入一个最小为0 的值")
);
推荐做法，将此文件放入messages_cn.js中，在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>
四、使用方式
1.将校验规则写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function()
$("#signupForm").validate();
);

<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="required:true,minlength:5" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="required:true,minlength:5,equalTo:'#password'" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
使用class=""的方式，必须引入包：jquery.metadata.js
可以使用如下的方法，修改提示内容：
class="required:true,minlength:5,messages:required:'请输入内容'"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
class="required:true,minlength:5,equalTo:'#password'"

2.将校验规则写到js代码中

$(document).ready(function()
$("#signupForm").validate(
rules:
firstname: "required",
email:
required: true,
email: true
,
password:
required: true,
minlength: 5
,
confirm_password:
required: true,
minlength: 5,
equalTo: "#password"

,
messages:
firstname: "请输入姓名",
email:
required: "请输入Email地址",
email: "请输入正确的email地址"
,
password:
required: "请输入密码",
minlength: jQuery.format("密码不能小于0个字 符")
,
confirm_password:
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"


);
);
//messages处，如果某个控件没有message，将调用默认的信息

<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
required:true 必须有值
required:"#aa:checked"表达式的值为真，则需要验证
required:function()返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素 参考技术A if ($("表单").valid())

$("表单").submit();

jQuery以验证表单中的序列号

我在WordPress中使用表单插件，允许JavaScript查询。

我被告知使用这样的东西：jQuery("#{{elemnt_id}}").val()

在表单插件中有一个部分用于在提交之前输入代码，如下所示：

// Occurs just before submitting  the form
function before_submit() {

 // IMPORTANT! If you want to interrupt (stop) the submitting of the form, 
this function should return true. You don't need to return any value if you
don't want to stop the submission.
}

我需要根据一些小的数学方程来验证序列号。序列号的格式为：abcd-efghij（以数字的形式，但我在这里使用格式的字母，以便我可以更容易地解释会发生什么

因此序列号在以下情况下有效：

1. a始终是数字1或2
2. 在步骤11中进一步生成bcd
3. 然后将e乘以1
4. 然后将f乘以2
5. 然后将g乘以3
6. 然后将h乘以4
7. 然后我乘以5
8. 然后将j乘以6
9. 然后将efghij加在一起并乘以3
10. a乘以11并加到上一步的结果中（efghij的总数乘以3）
11. 然后将3添加到结果中，然后结果等于bcd应该是什么

因此，有效数字将类似于1287-123456

从第二组数字：

5th digit multiplied by 1:-   1x1=1
6th digit multiplied by 2:-   2x2=4
7th digit multiplied by 3:-   3x3=9
8th digit multiplied by 4:-   4x4=16
9th digit multiplied by 5:-   5x5=25
10th digit multiplied by 6:-  6x6=36

结果全部增加= 91（1 + 4 + 9 + 16 + 25 + 36）

然后乘以3： - 91x3 = 273

然后从第一组数字：

第一位乘以11： - 1x11 = 11

然后将第二组的结果添加到第一组的结果中：

273 + 11 = 284

最后添加3：

284 + 3 = 287

给你第二个第三和第四位数

我试过这个，但可能完全错了..

Dim strID
Dim ColCSum3
Dim ChkVal
Dim InitVal
strID = "element_id"
If strID = "" Then
        ''''' return false
        '''' Return "Invalid"
End If
If Mid(strID, 5, 1) <> "-" Or Len(strID) <> 11 Then
        '''' return false
        '''' Return "Invalid"
End If

InitVal = CLng(Left(strID, 1))
ChkVal = CLng(Mid(strID, 2, 3))

ColCSum3 = (1 * CLng(Mid(strID, 6, 1)) + 2 * CLng(Mid(strID, 7, 1)) + 3 * CLng(Mid(strID, 8, 1)) + 4 * CLng(Mid(strID, 9, 1)) + 5 * CLng(Mid(strID, 10, 1)) + 6 * CLng(Mid(strID, 11, 1))) * 3
If 11 * InitVal + ColCSum3 + 3 = ChkVal Then
Return "Validated"
Else
Return "Invalid"
End If

有任何帮助请在表单插件部分使用正确的代码吗？

答案

您可以在提交表单之前添加jQuery列表器（请参阅this答案或jQuery.submit docs），然后从文本字段中拆分字符并完成您的魔法。 Here是一个小提琴：https://jsfiddle.net/strauman/qef7rsxc/。

所以你的before_submit功能变成了

function before_submit(){
  // If you write return false; in here, then
  // the form will not get sent.
  // if you write return true; then the form will
  // get sent:
  // Get the value of the textbox
  inputVal = $("#serial").val();
  // From @user1515791 answer
  // Split it at the dash (-)
  console.log(inputVal.indexOf('-'));
  if (inputVal.indexOf('-') != 4) {
    $("#errmsg").html("Wrong format. Needs four numbers before dash");
    return false;
  }
  var seqs = inputVal.split('-');
  var seq1 = seqs[0];
  var seq2 = seqs[1];
  // seq1 now contains abcd
  // and sec2 contains efghij
  if (isNaN(parseInt(seq1)) ||isNaN(parseInt(seq2))) {
    $("#errmsg").html("Got non-numbers in the sequence");
    return false;
  }
  // You can extract the numbers to variables
  // like in your question like this
  a = seq1[0];
  b = seq1[1];
  c = seq1[2];
  d = seq1[3];
  e = seq2[0];
  f = seq2[1];
  //...
  j = seq2[5];
  if (a != 1 && a != 2) {
    $("#errmsg").html("the first number is not 1 or 2");
    return false;
  }
  f = f * 2;
  // ...
  return false;
})

另一答案

我不熟悉WordPress，但是：你说有一个输入

<input type="text" id="serial"/>

那么你确实可以使用jquery检索值：

var inputVal = $('#serial').val();

然后你必须在val上做你的逻辑。但是，看起来您发布的代码是可视化基本代码？你在javascript中寻找所描述的实现吗？

我会先说

if(inputVal.indexOf('-')!=4)return false;
var seqs = inputVal.split('-');
var seq1= parseInt(seqs[0]);
var seq2= parseInt(seqs[1]);
if(isNaN(seq1) || isNaN(seq2))return false;

等等......剩下的应该很容易在这里和那里找到