在互联网日渐普及的今天，支付宝这种便利的网上交易平台越来越受人钟爱，我们很多时候都能用到。但是之前支付宝的个人收款主页下架了，所以还是给我们带来很多的不便。今天陈德馨就来告诉大家如何实现支付宝收款，可以卖模板，插件，也可以做为捐助等等。

首先加入样式CSS代码，如下：

<style>input{border:0px;height:25px;line-height:25px;}
.alipay{margin:20px auto;width:300px;border:1px solid #ccc;font-size:12px;}
.alipay ul{margin:0px;padding:0px;}
.alipay li{list-style-type:none;clear:both; overflow:hidden;}
.alipay li p{float:left;text-indent:0!important;padding:0px;margin:0px;width:60px;text-align:center;border-right:1px solid #ccc;}
.alipay li span{margin-left:5px;}
.bb{border-bottom:1px solid #ccc;height:30px;line-height:30px;}
.paybg{background:#ddd;}
.pay{text-align:center;}.pay input{background:#ccc;color:#FFF;height:30px;line-height:30px;border-radius:3px;margin:5px auto; font-weight:bold;}
.pay input:hover{background:#FC3;}
</style>

html代码如下（其中的支付宝帐号改为自己的即可）：

<form name="alipayment" accept-charset="GBK" method="post" action="https://shenghuo.alipay.com/send/payment/fill.htm" target="_blank" onSubmit="return CheckForm();">
<div class="alipay"><ul>
<li class="bb paybg"><p>付款帐号</p><span><input type="hidden" name="optEmail" value="支付宝帐号" />支付宝帐号</span></li>
<li class="bb"><p>付款金额</p><span><input type="text" id="s" class="form-control" name="payAmount" value=""  placeholder="金额必须填写"/></span></li>
<li class="bb"><p>备注说明</p><span><input type="text" name="title" value="" placeholder="可以是邮箱或QQ..."/></span></li>
<li class="pay"><input type="submit" id="searchsubmit" value="登录支付宝付款" /></li>
</ul></div></form>

实现必填项则需要加入js代码，如下

<script language=JavaScript>
function CheckForm(){
if(document.alipayment.payAmount.value.length == 0){alert("请输入付款金额.");document.alipayment.payAmount.focus();return false;}
var reg = new RegExp(/^\d*\.?\d{0,2}$/);
if(! reg.test(document.alipayment.payAmount.value)){alert("金额必须是数字");document.alipayment.payAmount.focus();return false;}
if(Number(document.alipayment.payAmount.value) < 1.00){alert("付款金额金额最小是1.00.");document.alipayment.payAmount.focus();return false; } 
} 
</script>

最终实现的效果如下图：

来源：陈德馨博客（微信/QQ号：35435164），转载请保留出处和链接！

地址：https://www.chendexin.com/archives/436.html