Question

所以我正在尝试为自定义网站创建付款表单。只有一条规则：不允许JavaScript 。这是我的代码：

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: red;
}

div {
    border-radius: 5px;
    background-color: lightgrey;
    padding: 40px;
}
</style>
<body>

<div class="login-page">
  <div class="form">

    <form class="login-form">
<fieldset>
<h1>Log in </h1>
      <input type="text" placeholder="username" required/>
      <input type="password" placeholder="password"required/>
      </fieldset>
    </form>

       <form class="Payment">
<fieldset>
<h1> Payment </h1>
     <select>
  <option value="Payment on pickup">Payment on pickup</option>
  <option value="Bank transfer/deposit">Bank transfer/deposit</option>
  <option value="Credit/Debit card">Credit/Debit card</option>

  </select>
<div id="mobile_creditcard" style="display: block;">
<select name="cardtype" class="form">
<option value="VISA">VISA</option>
<option value="MasterCard">MasterCard</option>
</select>
<br>Αριθμός κάρτας<br>
<input type="text" name="cardnumber"  style="width:80%;" maxlength="20" value="" required>

 <tr> 
    <td height="22" align="right" valign="middle">Expiry Date:</td>
    <td colspan="2" align="left">
      <SELECT NAME="CCExpiresMonth" >
        <OPTION VALUE="" SELECTED>--Month--
        <OPTION VALUE="01">January (01)
        <OPTION VALUE="02">February (02)
        <OPTION VALUE="03">March (03)
        <OPTION VALUE="04">April (04)
        <OPTION VALUE="05">May (05)
        <OPTION VALUE="06">June (06)
        <OPTION VALUE="07">July (07)
        <OPTION VALUE="08">August (08)
        <OPTION VALUE="09">September (09)
        <OPTION VALUE="10">October (10)
        <OPTION VALUE="11">November (11)
        <OPTION VALUE="12">December (12)
      </SELECT> 
      <SELECT NAME="CCExpiresYear">
        <OPTION VALUE="" SELECTED>--Year--
        <OPTION VALUE="04">2004
        <OPTION VALUE="05">2005
        <OPTION VALUE="06">2006
        <OPTION VALUE="07">2007
        <OPTION VALUE="08">2008
        <OPTION VALUE="09">2009
        <OPTION VALUE="10">2010
        <OPTION VALUE="11">2011
        <OPTION VALUE="12">2012
        <OPTION VALUE="13">2013
        <OPTION VALUE="14">2014
        <OPTION VALUE="15">2015
      </SELECT>
    </td>
  </tr>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td width="50%">
Όνομα κατόχου<br><input type="text"  style="width:70%;" name="cardholder" value="" required>
</td><td width="50%">
Τηλέφωνο κατόχου<br><input type="text"style="width:70%;" name="cardholderpho" value="" required>
</td></tr>
</tbody></table>

</div>
   </fieldset>
<button type="submit">Submit Payment</button>
    </form>

  </div>

</div>

</body>
</html>

我有3个问题，我需要帮助。首先，我希望submit按钮检查是否未给出username和password输入，如果没有给卡提供相同的消息info（如果没有给出卡片信息，则可以使用），即使我使用了必需属性，也无法使用。

我无法解决的第二个问题是，只有在选择了借记卡/信用卡付款选项时，我才能将信用卡/借记卡表单显示为***。我该怎么办？是什么？

最后但并非最不重要。如何让密码至少为5位，包括1个大写和1个数字？

Answer 1

如果您不能使用Javascript，那么您必须在服务器端进行所有这些验证，因此，提交表单后

Answer 2

submit button to check if username and password inputs are not given,

You have two separate form in your page & submit button is associated with second form, so it is not checking the username & password. Either use a single form or use two separate button to invoke all the validations

password to be atleast 5 digits including 1 upper case and 1 number

HTML5 comes with min & max attribute and also pattern matching for input. To check password for min of 5 letter you can use min attribute , to validate if atleast one 1 upper case & 1 number is present in password you have to use regex in pattern attribute. You can follow W3C to know more about pattern attribute & this LINK to know more about the required regex

credit/debit card form visible***only if *** the debit/credit card payment option is selected

This actually requires a event handler. Not sure if it can be done with only css

支付表格中的一般问题在html中

2 个答案: