搜索

当前位置:首页 > 技术教程 > 正文

如何用php+mysql做一个表单提交

发布时间:2017-08-12 23:03:36作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

php+mysql应用还是非常广泛的,常见的百度竞价单页面里的表单提交就是用PHP+MySQL做的!以我做过的的项目http://works.weiyiqi.net/jinqi/list_tjckd.php为例来讲解怎么做。

首先介绍一下需要的几个文件:datecenter.php(用来从数据库读取已经提交的信息);postdate.php(用来接收从表单传递来的值并写入数据表和判断是否提交成功);list_tjckd.php(有表单的页面)。

第一步:建立表单。这里我一般用Dreamweaver插入表单和表格,因为方便。下面是我的表单:
  1. <form action="postdate.php" method="post" name="form"> 
  2.     <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  3.         <tr> 
  4.             <td colspan="2" class="bar">欠款信息</td> 
  5.         </tr> 
  6.         <tr> 
  7.             <td class="left">欠&nbsp;款&nbsp;种&nbsp;类:</td> 
  8.             <td class="right"><select name="qkzl" id="qkzl"> 
  9.                 <option>---请选择欠款种类---</option> 
  10.                 <option>拖欠物业费</option> 
  11.                 <option>银行贷款逾期</option> 
  12.                 <option>互联网平台贷款逾期</option> 
  13.                 <option>民间借贷逾期</option> 
  14.             </select></td> 
  15.         </tr> 
  16.         <tr> 
  17.             <td class="left">欠&nbsp;款&nbsp;原&nbsp;因:</td> 
  18.             <td class="right"><textarea name="qkreason" id="qkreason" placeholder="请详细描述欠款原因,200字以内"></textarea></td> 
  19.         </tr> 
  20.         <tr> 
  21.             <td class="left">债&nbsp;权&nbsp;金&nbsp;额:</td> 
  22.             <td class="right"><input type="text" name="money" id="money" placeholder="请输入债权金额(单位是元)"></td> 
  23.         </tr> 
  24.         <tr> 
  25.             <td colspan="2" class="bar">债权人信息</td> 
  26.         </tr> 
  27.         <tr> 
  28.             <td class="left">身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份:</td> 
  29.             <td class="right"><p> 
  30.                 <label> 
  31.                     <input type="radio" name="identity" value="个人" id="RadioGroup1_0"> 
  32.                     个人</label> 
  33.                 <label> 
  34.                     <input type="radio" name="identity" value="企业" id="RadioGroup1_1"> 
  35.                     企业</label> 
  36.             </p></td> 
  37.         </tr> 
  38.         <tr> 
  39.             <td class="left">债权人名称:</td> 
  40.             <td class="right"><input type="text" name="name" id="name" placeholder="个人请输入姓名,企业请输入公司名称"></td> 
  41.         </tr> 
  42.         <tr> 
  43.             <td class="left">身&nbsp;份&nbsp;证&nbsp;号:</td> 
  44.             <td class="right"><input type="text" name="card" id="card" placeholder="请输入身份证号码"></td> 
  45.         </tr> 
  46.         <tr> 
  47.             <td class="left">手&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;号:</td> 
  48.             <td class="right"><input type="tel" name="sjhm" id="sjhm" placeholder="请输入手机号码"></td> 
  49.         </tr> 
  50.         <tr> 
  51.             <td colspan="2" class="bar">被催收人信息</td> 
  52.         </tr> 
  53.         <tr> 
  54.             <td class="left">身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份:</td> 
  55.             <td class="right"><p> 
  56.                 <label> 
  57.                     <input type="radio" name="bidentity" value="个人" id="RadioGroup1_2"> 
  58.                     个人</label> 
  59.                 <label> 
  60.                     <input type="radio" name="bidentity" value="企业" id="RadioGroup1_3"> 
  61.                     企业</label> 
  62.             </p></td> 
  63.         </tr> 
  64.         <tr> 
  65.             <td class="left">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</td> 
  66.             <td class="right"><input type="text" name="bname" id="bname" placeholder="个人请输入姓名,企业请输入公司名称"></td> 
  67.         </tr> 
  68.         <tr> 
  69.             <td class="left">身&nbsp;份&nbsp;证&nbsp;号:</td> 
  70.             <td class="right"><input type="text" name="bcard" id="bcard" placeholder="请输入身份证号码(如果不知道可不填写)"></td> 
  71.         </tr> 
  72.         <tr> 
  73.             <td class="left">手&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;号:</td> 
  74.             <td class="right"><input type="tel" name="bsjhm" id="bsjhm" placeholder="请输入手机号码"></td> 
  75.         </tr> 
  76.         <tr> 
  77.             <td class="left">担&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保:</td> 
  78.             <td class="right"><p> 
  79.                 <label> 
  80.                     <input type="radio" name="danbao" value="有保证人" id="RadioGroup1_4"> 
  81.                     有保证人</label> 
  82.                 <label> 
  83.                     <input type="radio" name="danbao" value="有保证物" id="RadioGroup1_5"> 
  84.                     有保证物</label> 
  85.             </p></td> 
  86.         </tr> 
  87.         <tr> 
  88.             <td colspan="2"><input type="button" name="determine" id="determine" value="确认提交" onClick="checktotal()"> 
  89.             </td> 
  90.         </tr> 
  91.     </table> 
  92. </form> 
第二步:写前端的js验证(也就是list_tjckd.php页面),下面是我的js代码。
<script> 
    <!-- 
    欠款种类验证--> 
    function checkkind() { 
        var kinds = document.form.qkzl.value; 
        if (kinds == "---请选择欠款种类---") { 
            alert("您还未选择欠款种类!"); 
            return false; 
        } else { 
            return true; 
        } 
    } 
 
    <!--欠款原因验证--> 
    function checkreason() { 
        var reasons = document.form.qkreason.value; 
        var reg = /^[\u4e00-\u9fa5]*$/; 
        if (reasons.length >= 10 && reasons.length <= 200) { 
            if (reg.test(reasons) == false) { 
                alert("您只能用汉字进行描述"); 
                return false; 
            } else { 
                return true; 
            } 
        } else { 
            alert("请输入10~200个汉字进行描述!"); 
            return false; 
        } 
    } 
 
    <!--欠债金额验证--> 
    function checkje() { 
        var ed = document.form.money.value; 
        var reg = /^\+?[1-9][0-9]*$/; 
        if (ed.length > 0) { 
            if (reg.test(ed) == false) { 
                alert("请输入一个非零正整数!"); 
                return false; 
            } else { 
                return true; 
            } 
        } else { 
            alert("请输入债权金额!"); 
            return false; 
        } 
    } 
 
    <!--债权人身份验证--> 
    function checkzq() { 
        var zqiden = document.form.identity.value; 
        if (zqiden == "个人" || zqiden == "企业") { 
            return true; 
        } else { 
            alert("您还未选择债权人的身份!"); 
            return false; 
        } 
    } 
 
    <!--债权人的名称验证--> 
    function checkzqname() { 
        var zqname = document.form.name.value; 
        var reg = /^[\u4e00-\u9fa5]*$/; 
        if (zqname.length >= 2 && zqname.length <= 20) { 
            if (reg.test(zqname) == false) { 
                alert("债权人名称只能为汉字!"); 
                return false; 
            } else { 
                return true; 
            } 
        } else { 
            alert("债权人名称不能为空,且不得超过20个汉字!"); 
            return false; 
        } 
    } 
 
    <!--债权人身份证号码验证--> 
    function checkzqsfzhm() { 
        var zqcard = document.form.card.value; 
        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; 
        if (zqcard.length > 0) { 
            if (reg.test(zqcard) == false) { 
                alert("您输入的身份证号不正确,请重新输入!"); 
                return false; 
            } else { 
                return true; 
            } 
        } else { 
            alert("债权人身份证号不能为空!"); 
            return false; 
        } 
    } 
 
    <!--债权人手机号验证--> 
    function checkzqsjh() { 
        var zqsjh = document.form.sjhm.value; 
        var reg = /^1(3|4|5|7|8)\d{9}$/; 
        if (reg.test(zqsjh) == false) { 
            alert("请输入正确的11位债权人手机号码!"); 
            return false; 
        } else { 
            return true; 
        } 
    } 
 
    <!--被催收人身份验证--> 
    function checkcssf() { 
        var cssf = document.form.bidentity.value; 
        if (cssf == "个人" || cssf == "企业") { 
            return true; 
        } else { 
            alert("请选择被催收人的身份"); 
            return false; 
        } 
    } 
 
    <!--被催收人名称验证--> 
    function checkbcsname() { 
        var bcsname = document.form.bname.value; 
        var reg = /^[\u4e00-\u9fa5]*$/; 
        if (bcsname.length >= 2 && bcsname.length <= 20) { 
            if (reg.test(bcsname) == false) { 
                alert("被催收人名称只能为汉字!"); 
                return false; 
            } else { 
                return true; 
            } 
        } else { 
            alert("被催收人名称不能为空,且不超过20个汉字"); 
            return false; 
        } 
    } 
 
    <!--被催收人身份证号码验证--> 
    function checkbcsiden() { 
        var bcsiden = document.form.bcard.value; 
        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; 
        if (reg.test(bcsiden) == false) { 
            alert("请输入正确的被催收人身份证号码(不影响表单内容的提交)"); 
            return false; 
        } else { 
            return true; 
        } 
    } 
 
    <!--被催收人手机号码验证--> 
    function checkbcswsjhm() { 
        var bcswsjhm = document.form.bsjhm.value; 
        var reg = /^1(3|4|5|7|8)\d{9}$/; 
        if (reg.test(bcswsjhm) == false) { 
            alert("请输入正确的被催收人手机号码!"); 
            return false; 
        } else { 
            return true; 
        } 
    } 
 
    <!--保证类型验证--> 
    function checktype() { 
        var type = document.form.danbao.value; 
        if (type == "有保证人" || type == "有保证物") { 
            return true; 
        } else { 
            alert("请选择是否有保证物或保证人!"); 
            return false; 
        } 
    } 
 
    <!--总验证--> 
    function checktotal() { 
        if (checkkind() && checkreason() && checkje() && checkzq() && checkzqname() && checkzqsfzhm() && checkzqsjh() && checkcssf() && checkbcsname() && checkbcswsjhm() && checktype()) { 
            document.form.submit(); 
        } 
        else { 
            window.location.href = "#form"; 
        } 
    } 
</script> 
本人不擅长js,所以写了一大堆,但这些足以解决表单验证问题。在这里要注意三点,总验证、表单提交的跳转和最后确认提交的onclick事件。确认提交的类型一定是button而不是submit,id和name的起名也不能是submit。不要问为什么,这都是经验。

if else语句是最符合常人逻辑的语句,把这个语句搞明白一般写js表单验证都不是问题。

第三步:把数据从数据库读取出来展现在一张表上(也就是datecenter.php)。因为代码太多,所以请大家下本页面,下载链接:https://pan.baidu.com/s/1i5Dt5hr 提取密码:30ky。

.sql文件就不给大家提供了,感兴趣的话可根据代码建数据库和数据表,建数据表一定要注意主键和自动增长列。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:Dreamweaver如何使php文件在本地服务器运行下一篇:如何在码云上传项目

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包