javascript
format email untuk textbox
hai hai…
kali ini saya akan membagikan sedikit pengetahuan tentang bagaimana membuat textbox yang ada pada web sesuai dengan format email. Jadi jika para pengguna / user memasukkan email dengan format yang tidak benar (tidak xxx@xxx.xx) maka akan muncul peringatan, langsung saja
/*
by khuclukz
*/
<HTML>
<HEAD>
<TITLE>Format Email untuk textbox</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function cekEmail() {
var email = document.getElementById('text_email');
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!filter.test(email.value))
{
alert('silahkan masukkan Email yang benar');
email.focus
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Format Email</H1>
<HR>
Email : <input name="text_email" type="text" id="text_email" onchange="cekEmail()" />
</BODY>
</HTML>
kali ini kita menggunakan regex (regular expression) yang bisa dipelajari sendiri (*kapan2 akan coba saya tulis tentang belajar regex – regular expression)
pada
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
/^[a-zA-Z0-9._-]+ : menandakan bahwa email itu dimulai dengan karakter alfa-numerik (baik huruf kecil dan karakter huruf besar yang diizinkan). juga boleh ada titik, garis bawah (underscore), dan tanda hubung (dash).
@ : Harus ada ‘@’ setelah karakter di awal tadi
[a-zA-Z0-9.-]+ : Setelah ‘@’ tanda harus ada beberapa karakter alfa-numerik. Hal ini juga dapat berisi (‘.’) titik dan tanda hubung (‘-’)
\. : Setelah bagian kedua yang tadi, harus ada titik(‘.’). Hal ini adalah untuk memisahkan domain dan nama subdomain.
[a-zA-Z]{2,4}$/ : terakhir, alamat email harus diakhiri dengan 2-4 huruf. az dan AZ berarti bahwa huruf kecil dan huruf besar yang dibolehkan. {2,4} menunjukkan jumlah minimum dan maksimum karakter, untuk penamaan domain dengan 2, 3 dan 4 karakter misalnya ; info,us, org, com, net).
onchange pada texbox berfungsi ketika cursor meninggalkan textbox itu akan memberikan alert kalo format email yang kita masukkan belum benar.
selamat mencoba
number only in textbox
Pernah berpikiran gimana meng set textbox pada halaman website yang khusus untuk ditulisi dengan angka, huruf tidak bisa dituliskan di textbox ini.
hemm.. langsung sajah deh, ini ada source, bagaimana bermain-main dengan javascript, sehingga textbox hanya bisa ditulisi dengan huruf
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Letting Only Numbers Pass to a Form Field</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkIt(evt) {
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
status = "This field accepts numbers only."
return false
}
status = ""
return true
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Letting Only Numbers Pass to a Form Field</H1>
<HR>
<FORM onSubmit="return false">
Enter any positive integer: <INPUT TYPE="text" NAME="numeric"
onKeyPress="return checkIt(event)">
</FORM>
</BODY>
</HTML>
gak percaya.. silahkan dicoba disini
Menampilkan Tanggal pada website menggunakan javascript
Seringkali kita melihat website atau blog pribadi yang di pasang informasi tanggal. Sebenarnya untuk membuat tampilan tanggal pada website tidak sesulit yang dikira, kita tinggal memasukkan beberapa script (javascript) di tempat yang akan dipasangi tanggal. Jadi deh bisa dilihat tanggal berapa sekarang. Biasanya tanggal tersebut mengambil data sesuai yang ada di tanggal komputer anda, lebih tepatnya di bios. Coba saja merubah setingan tanggal pada komputer anda, maka tanggal yang di pasang akan ikut berubah juga. Tertarik untuk mencoba silahkan di coba javascript tanggal berikut ini, tinggal copy paste saja
untuk tampilan dengan format dd/mm/yy (contoh : 01/02/2009)
<script type="text/javascript"><!-- var date = new Date(); var d = date.getDate(); var day = (d < 10) ? '0' + d : d; var m = date.getMonth() + 1; var month = (m < 10) ? '0' + m : m; var yy = date.getYear(); var year = (yy < 1000) ? yy + 1900 : yy; document.write(day + "/" + month + "/" + year); //--></script>
Sedangkan untuk format date/month/year (contoh: 1 januari 2009)
<script type="text/javascript"><!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('Januari','Februari','Maret','April','Mei',
'Juni','Juli','Augustus','September','Oktober','November','Desember');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//--></script>
mudah bukan….
Selamat belajar javascript
transparacy png pada IE5 dan IE6
Ketika kita menggunakan gambar Transparan dengan format PNG di browser IE5 dan IE6 biasanya sering muncul warna lain yang tidak sesuai dengan keinginan kita, hal seperti itu bisa disiasati dengan menggunakan bantuan javascript. Adapun bantuan yang di maksud adalah sebagai berikut :
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
