如何创建(HTML设计)并使用jQuery验证表单,用于以下场景


How to create(HTML design) and validate a form using jQuery for following scenario?

我是Web开发的新手。我正在为我的网站使用 HTML、jQuery 和 PHP。首先,我想设计一个表单,并使用以下方式使用 jQuery 对其进行验证,然后生成一个 URL 并将其用作表单的操作:

  • 一个简单的网页,其中包含输入框 - 2 行和 10 行。 即.key = 值 |一个输入框用于"键",一个输入框用于"值"

  • 在此表单下方,应该有一个"提交"按钮

  • "提交"按钮的操作应该是生成一个 url,如 www.abc.com/samplephp?key1=value1&key2=value2&...&键 10=值 10

  • 键=值只应在不为空时才附加

  • 当 url 形成并提交时,php 脚本应该处理所有传入的 GET 参数,并将它们保存在数据库中的表中

任何人都可以帮助我以这种方式创建表单并使用 jQuery 根据给定的要求对其进行验证吗?我面临的主要问题是命名文本字段名称并在jQuery中访问它们。我完全搞砸了这个任务。请帮助我满足上述四个条件。我会对自己做第五个要求。请注意,在完全验证表单后,应按照要求中给定的URL进行表述,并且应充当表单的操作。提前谢谢。

在所有文本框上定义一个属性,如下所示

 <input id="key1" type="text" ctrltype="keyval">
 <input id="key2" type="text" ctrltype="keyval">
  .
  .
 <input id="key10" type="text" ctrltype="keyval">
 <input id="Value1" type="text" ctrltype="keyval">
 <input id="Value2" type="text" ctrltype="keyval">
 .
 .
 <input id="Value10" type="text" ctrltype="keyval">

定义一个函数以检查文本框为空或不像下面那样

$("input[ctrltype$='keyval']").focusout() {
 //Do as per your requirement
}
<input id="key1" type="text" placeholder="key1">

要使用 id 访问 Jquery 中的元素,您需要使用 $('#key1'). 后跟 paticualar jquery 函数。虽然我不会真正验证客户端,因为这是一个安全整体。在提交表单时进行审核。

有一个 jQuery 插件 ta 验证你的表单:)

它是jQuery验证插件。这很容易实现!

但是不要忘记检查PHP文件中接收的数据,因为客户端可以禁用JS...