如何验证以下情况的表单? [英] How to validate a form for following scenario?

查看:83
本文介绍了如何验证以下情况的表单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对web开发比较陌生。我为我的网站使用HTML,jQuery和PHP。我想要设计一个表单并通过以下方式对其进行验证:


  • 一个简单的带有输入框的网页 - 2个行和10行。即key = value |一个输入框用于'钥匙'和'一个用于'价值'


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

  • 提交按钮的操作应该是生成一个网址,如www.abc.com/samplephp?key1=value1&key2=value2&......&key10=value10


  • Key =值只能附加,如果不为空


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




任何人都可以帮助我以这种方式创建表单并按照给定的要求使用jQuery验证它?我面临的主要问题是命名文本字段名称并在jQuery中访问它们。我完全搞不清这个任务。请帮助我满足上述四个条件。我会对自己做第五项要求。

解决方案

试试像

PHP

 <?php 
$ querystring = explode('&',$ _ SERVER [ '请求参数']);
$ newData = array();
foreach($ querystring as $ keyPair)
{
$ kparr = explode('=',$ keyPair);
$ key = trim($ kparr [0]);
$ value = trim($ kparr [1]);
if($ key和$ value)
{
$ newData [$ key] = $ value;


print_r($ newData); //你的最终数组有有效的键值
?>

HTML

 < form action =#method =GETonsubmit =return false> 
< div>
< input type =textname =key []value =key1/>& nbsp;< input type =textname =value []value =value1 />
< / div>
< div>
< input type =textname =key []value =key2/>& nbsp;< input type =textname =value []value =value2 />
< / div>
< div>
< input type =textname =key []value =key3/>& nbsp;< input type =textname =value []value =value2 />
< / div>
< div>
< input type =submitid =btnSubmitvalue =Save/>
< / div>
< / form>

SCRIPT
< $($'code> $(function(){
$('#btnSubmit')。on('click',function(){
var qs = [];
$('input [name =key []]')。each(function(index){
k = $(this).val();
v = $('input [ (k&& v){//仅用于非空键值对
qs.push(k +'='+ v);
}
});
alert(qs.join('&'));
return false;
});
});

小提琴 http://jsfiddle.net/PdkSd/1


I'm relatively new to web development. I'm using HTML, jQuery and PHP for my website. I want to design a form and validate it in a following way:

  • A simple webpage which has input boxes - 2 in a row and 10 rows. i.e. key = value | One input box for 'key' & one for 'value'

  • Below this form, there should be a 'Submit' button

  • The action for Submit button should be that a url should be generated like www.abc.com/samplephp?key1=value1&key2=value2&……&key10=value10

  • Key=Value should be only appended if not null

  • When the url is formed and submitted, the php script should handle all the incoming GET parameters and save them in DB in a table

Can anyone help me in creating the form in this manner and validating it as per the given requirement using jQuery? The main issue I'm facing is in naming the text field names and accessing them in jQuery. I got totally messed up with this task. Please help me to satisfy the above four conditions. I'll do the fifth requirement on my self. Thanks in advance.

解决方案

Try like,

PHP

<?php
   $querystring=explode('&',$_SERVER['QUERY_STRING']);
   $newData=array();
   foreach($querystring as $keyPair)
   {
       $kparr=explode('=',$keyPair);
       $key=trim($kparr[0]);
       $value=trim($kparr[1]);
       if($key and $value)
       {
          $newData[$key]=$value;
       }
   }
   print_r($newData);// your final array having valid key values
?>

HTML

<form action="#" method="GET" onsubmit="return false">
    <div>
        <input type="text" name="key[]" value="key1" />&nbsp;<input type="text" name="value[]" value="value1" />
    </div>
    <div>
        <input type="text" name="key[]" value="key2" />&nbsp;<input type="text" name="value[]" value="value2" />
    </div>
    <div>
        <input type="text" name="key[]" value="key3" />&nbsp;<input type="text" name="value[]" value="value2" />
    </div>
    <div>
        <input type="submit" id="btnSubmit" value="Save" />
    </div>
</form>

SCRIPT

$(function(){
    $('#btnSubmit').on('click',function(){
        var qs=[];
        $('input[name="key[]"]').each(function(index){
            k=$(this).val();
            v=$('input[name="value[]"]:eq('+index+')').val();
            if(k && v){// only for non-empty key value pair
                qs.push(k+'='+v);
            }
        });
        alert(qs.join('&'));
        return false;
    });
});

Fiddle http://jsfiddle.net/PdkSd/1

这篇关于如何验证以下情况的表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆