Javascript表单验证器的日期

时间:2011-03-31 02:11:28

标签: php html datetime validation

我需要帮助。这是我的HTML代码:

<tr>
    <div align="left">Please Enter Date:
    <td><div align="left" class="style66">(E.g: 8-Feb-11)<br><input name="userdateinp" type="text" size="20" id="userdateinp"/></div></td>
    </tr>

当我点击提交按钮..并且用户输入错误的日期,例如:8-02-11或2月8-11时,脚本必须说用户输入了错误的日期格式。怎么做?我看到的只是纯数字教程。那个月怎么说FEB,MAR,APR等:)。

我从网上获得了这段代码。

Javascript代码:

<script language = "Javascript">
/**
 * DHTML date validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
 */
// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
    var i;
    for (i = 0; i < s.length; i++){   
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag){
    var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++){   
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function daysInFebruary (year){
    // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
    for (var i = 1; i <= n; i++) {
        this[i] = 31
        if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
        if (i==2) {this[i] = 29}
   } 
   return this
}

function isDate(dtStr){
    var daysInMonth = DaysArray(12)
    var pos1=dtStr.indexOf(dtCh)
    var pos2=dtStr.indexOf(dtCh,pos1+1)
    var strMonth=dtStr.substring(0,pos1)
    var strDay=dtStr.substring(pos1+1,pos2)
    var strYear=dtStr.substring(pos2+1)
    strYr=strYear
    if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
    if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
    for (var i = 1; i <= 3; i++) {
        if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
    }
    month=parseInt(strMonth)
    day=parseInt(strDay)
    year=parseInt(strYr)
    if (pos1==-1 || pos2==-1){
        alert("The date format should be : mm/dd/yyyy")
        return false
    }
    if (strMonth.length<1 || month<1 || month>12){
        alert("Please enter a valid month")
        return false
    }
    if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
        alert("Please enter a valid day")
        return false
    }
    if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
        alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
        return false
    }
    if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
        alert("Please enter a valid date")
        return false
    }
return true
}

function ValidateForm(){
    var dt=document.frmSample.txtDate
    if (isDate(dt.value)==false){
        dt.focus()
        return false
    }
    return true
 }

</script>

然后是HTML代码:

<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
                <p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font> 
                  : 
                  <input type="text" name="txtDate" maxlength="10" size="15">
                </p>
                <p> 
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>

如何编辑它... 08-Feb-11? :)

2 个答案:

答案 0 :(得分:1)

如果您将设置的日期更改为始终为2个字符,即08年2月11日而不是8月2日 - 11日,您可以使用正则表达式检查4-6“令牌”以查看它们是否为字母。< / p>

您是否有任何特殊原因让他们以这种方式输入日期格式?

使用更常见的格式可能更容易,然后让你的javascript转换它。

否则,如果这是您必须具有的格式,最好的选择可能是为了简单而做3个下拉菜单,然后您可以使用php将三个结果组合成一个字符串,无论您想要什么格式。

答案 1 :(得分:1)

由于所有格式,日期都很棘手。您是否希望用户使用单一格式或多种格式并不是很清楚。但是,如果您的要求更复杂,Date.js库在日期周围有一些很棒的功能。

http://www.datejs.com/

还可以考虑将它与日期选择器一起使用,例如jQuery UI:

http://jqueryui.com/demos/datepicker/

但请记住,如果文本框允许用户输入,则必须假设用户将在其中输入垃圾。 Datepickers不会阻止这种情况。